JS cancelAnimationFrame syntax

Question

This may be really easy question but i just started playing with request animation frame and i need some guidance. I found on the internet that the safest (in terms of browser compatibility) syntax for request animation frame is this code:

    window.requestAnimFrame = (function() {
        return  window.requestAnimationFrame       || 
                window.webkitRequestAnimationFrame || 
                window.mozRequestAnimationFrame    || 
                window.oRequestAnimationFrame      || 
                window.msRequestAnimationFrame     || 
                function(callback, element) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

and then call it like this: requestAnimFrame( protect );

the question is how to build cancel animation frame syntax to perfectly align with the above one. ( should cancel all above prefix starters and set timeout in case of fallback).

Thank you for the answers ;)

---EDIT---

I just found this article >click me<

Solution presented in the article only includes vendors webkit and moz as they claim that 2013.03.06: No more [ms] or [o] prefixes neccessary. Removed. I dont know now if the solution is complete and can be used today.

score 3 · Accepted Answer · answered Jan 14 '16 at 09:25

3

I love caniuse.com for these kind of things. Check out:

http://caniuse.com/#feat=requestanimationframe

You could click Show All and see all of the browser versions and what kind of requestAnimationFrame they support(prefixes included).

But I think it's pretty safe just to use requestAnimationFrame and cancelAnimationFrame. Unless you really really really need to support browsers like IE9 or Safari 6 you don't need to shim this.

answered Jan 14 '16 at 09:25

kosman

78
4

i need support for ie9 and such unfortunetely – Mevia Jan 14 '16 at 09:57
1

In that case the polyfill from the article is your best bet(https://gist.github.com/paulirish/1579671), since it also polyfills cancelAnimationFrame. Note that you'll have shitty performance in IE9. – kosman Jan 14 '16 at 10:07

JS cancelAnimationFrame syntax

1 Answers1