Your Search Results

    window.requestAnimationFrame Redirect 1

    The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes as an argument a callback to be invoked before the repaint.

    Note: Your callback routine must itself call requestAnimationFrame() if you want to animate another frame at the next repaint.

    You should call this method whenever you're ready to update your animation onscreen. This will request that your animation function be called before the browser performs the next repaint. The number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web browsers as per W3C recommendation. The callback rate may be reduced to a lower rate when running in background tabs.

    The callback method is passed a single argument, a DOMHighResTimeStamp, which indicates the current time when callbacks queued by requestAnimationFrame begin to fire. Multiple callbacks in a single frame, therefore, each receive the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 10 µs.

    Syntax

    requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
    requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
    requestID = window.webkitRequestAnimationFrame(callback); // Older versions of Safari / Chrome
    

    Parameters

    callback
    A parameter specifying a function to call when it's time to update your animation for the next repaint. The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time for when requestAnimationFrame starts to fire callbacks.

    Return value

    requestID is a long integer value that uniquely identifies the entry in the callback list. This is a non-zero value, but you may not make any other assumptions about its value. You can pass this value to window.cancelAnimationFrame() to cancel the refresh callback request.

    Example

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                                  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    
    var start = null;
    
    var d = document.getElementById("SomeElementYouWantToAnimate");
    
    function step(timestamp) {
      var progress;
      if (start === null) start = timestamp;
      progress = timestamp - start;
      d.style.left = Math.min(progress/10, 200) + "px";
      if (progress < 2000) {
        requestAnimationFrame(step);
      }
    }
    
    requestAnimationFrame(step);
    

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 10.0 webkit
    24.0
    4.0 moz [1]
    23 [2]
    10.0 (Yes) -o
    15.0
    6.0 webkit
    6.1
    requestID return value 23.0 webkit
    24.0
    11.0 (11.0) moz 10.0 (Yes) -o
    15.0
    (Yes)
    Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support Not supported 10.0 webkit 16.0 webkit ? ? 14.0 7.0
    6.0 webkit
    requestID return value ?   ? 11.0 (11.0) moz ? ? ?

    Gecko notes

    [1] Prior to Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8), mozRequestAnimationFrame() could be called with no input parameters. This is no longer supported, as it's not likely to become part of the standard.

    [2] The callback parameter is a DOMTimeStamp instead of a DOMHighResTimeStamp if the prefixed version of this method was used. DOMTimeStamp only has millisecond precision, but DOMHighResTimeStamp has a minimal precision of ten microseconds.

    Chrome notes

    The correct call in Chrome to cancel the request is currently window.cancelAnimationFrame(). Older versions, window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), have been deprecated but are still supported for now.

    Specification

    Timing control for script-based animations: requestAnimationFrameWD

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,