kof/animation-frame

An even better requestAnimationFrame

An even better requestAnimationFrame

• fixed ios6 issues upgrading to the native implementation if it works (no agent sniffing)
• like the native implementation it will group callbacks for better performance
• like the native implementation it will degrade the frame rate depending on device performance
• you can define your own frame rate specifically for every animation
• highly optimized for performance
• can be used as a shim, but has an own namespace per default
• no performance degradation if using mutilple RAF calls in parallel (see examples/compare.html)

Usage

Get the api

If you are inside of a commonjs/amd module:

var AnimationFrame = require('animation-frame');

Otherwise its defined on window:

var AnimationFrame = window.AnimationFrame;

Activate the shim AnimationFrame.shim(options)

It will replace native implementation if it does exist but still will use it if possible. So you can use window.requestAnimationFrame and window.cancelAnimationFrame after this safely. Optionally you can pass the frame rate.

AnimationFrame.shim(options);

Set custom default frame rate

There are devices with different refresh rate than 60 out of there. You can define a custom value, for the shim implementation. Native implementation should do it for you. Do it before requesting frames, because after that the frame length is cached.

AnimationFrame.FRAME_RATE = 30;

Create instance new AnimationFrame(options)

Options can be an object or a number, number is the custom frame rate.

Options:

• useNative use the native animation frame if possible, defaults to true
• frameRate pass a custom frame rate

    // Using default frame rate
    var animationFrame = new AnimationFrame();

    // Using custom frame rate.
    var animationFrame = new AnimationFrame(20);

    // Avoid using native RAF:
    var animationFrame = new AnimationFrame({useNative: false});

Request a frame animationFrame.request(fn)

var frameId = animationFrame.request(function(time) {
    // Your animation here.
});

Cancel frame animationFrame.cancel(frameId)

var animationFrame = new AnimationFrame();
animationFrame.cancel(frameId);

Known problems

• ios6-7 safari native animation frame animation can conflict with css animations, see #2

Credits

http://paulirish.com/2011/requestanimationframe-for-smart-animating

http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

https://gist.github.com/paulirish/1579671

https://gist.github.com/jonasfj/4438815

https://gist.github.com/KrofDrakula/5318048

License

MIT

animation-frame's Issues

Add Typescript definitions

The definitely typed definitions are either out of date or broken since they didn't work for me. I have updated type definitions, would you be open to a PR adding them?

I had problems with animation frame. When I quickly destroyed and created it_ Callbacks and_ The timeoutId is null

I had problems with animation frame. When I quickly destroyed and created it_ Callbacks and_ The timeoutId is null

raf feature test when window focused

If native raf is not working and window get focused, redo the feature test to switch back to the native raf when possible

browserify build broken

From 0.1.7 to 0.2.1 I can't use animation-frame with browserify anymore. Tried it on a clean Ubuntu instance with node 0.12.0.

$ npm install animation-frame
$ echo "require('animation-frame')" > index.js

$ browserify index.js 

Error: Cannot find module './native' from '/tmp/node_modules/animation-frame'
    at /usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:43:25
    at load (/usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:99:43)
    at /usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:105:22
    at /usr/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at Object.oncomplete (fs.js:108:15)

It does work though if I require it with require('./node_module/animation-frame/index.js') but not with require('./node_module/animation-frame').

Oh well, I think I just found the problem. PR incoming.

Uncaught SecurityError

When using the library inside an iframe with mixed domains, this code will throw a SecurityError.

Maybe we should encapsulate it in a try/catch and fallback on the non-native implementation in this situation.

Cross-domain iframe bug

if i run this lib in iframe with domain not same as window.top domain, script fails, bcz this lib trying to access top variable properties in global scope

Some code questioning

Not really an issue. I've found many gists/repos that bring a cross-browser requestAnimationFrame proposal and I don't want to put my hands on that (not really the time to, and many people have already done it). Then, I've just commented this Paul Irish's gist and I'm wondering which gist/repo is up-to-date. If you have the time, I invite you to that discussion ;)

Create bundled version

Like in version 0.1.7, it would be great if version 0.2.4 would also have a bundled version, a single JS file that does not require additional files.

Would be good to avoid this https://github.com/kof/animation-frame/blob/0.2.4/AnimationFrame.js#L10 or at least create an additional bundled file.

native raf stops working when exiting fullscreen switching space on Safari

http://stackoverflow.com/questions/24449821/requestanimationframe-not-working-when-exiting-fullscreen-switching-space-on-saf/25068927

don't need o or ms prefixing

Actually, never needed ms or o prefixes except for their betas: http://caniuse.com/requestanimationframe
Hardly need to look for moz prefix (1%?). So you can simply if webkit

I like your idea for variable FPS!

Documentation for module loaders and transpilers

Ussage with webpack / babel

Loops forever in IE8

Internet Explorer 8 loops forever in the setTimeout callback. There is no delay between callbacks which are processed - in other words it seems that as soon as one callback is processed another has already been added.

RE: Fuck You for Ads in JSS

The drama is that people like you are big damage to our community.

Incorrect. People who have so little respect for developer tools that they put their trashy ads in are the ones with no respect.

You didn't care to look up that the postinstall hint was already removed a long time before you opened that issue, it was already discussed.

No, it hasn't been removed. That's the thing with NPM - you can't remove something like that once it's out there.

You didn't care to ask why we added it in the first place.

As if I needed to? The ad was quite clear.

You didn't care that many other very popular projects do that as well, for example, preact, and 99,999999% of people don't get offended by this.

Yes, I do care about that. Glad I don't use preact and if I did have to use it, I'd say FUCK YOU to them too :)

You are using my time and my mental health to express your damaged and hostile attitude towards open source and essentially to other people work, where many people like me invest their PERSONAL time.

No, that is incorrect. You didn't have to respond, that was your choice. It was also your choice to desperately plead for money via NPM. You deserve every bit of mental health loss and hostility that you're getting.

If I would be a maintainer in this organization, I would ban you here as well after what you did there cssinjs/jss#1013

Yawn. You can ban my account, can't ban me.

JSS sucks, I wouldn't use it by choice and I'll be happy to point out what kind of desperate ad-driven scumbags are running it anytime it comes up. I wish you hadn't invested your PERSONAL time.

Feel free to keep responding, it's totally up to you!

IE8 & 9 fail

IE8 fails with current master (3820dbc):

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Sat, 17 Jan 2015 09:39:43 UTC


Message: Object doesn't support this property or method
Line: 111
Char: 9
Code: 0
URI: http://example.com/AnimationFrame.js

IE9 is mor specific:

SCRIPT438: Object doesn't support property or method 'setTimeout' 
AnimationFrame.js, line 111 character 9

Add tests

undefined nativeCancelRequestAnimationFrame

I'm getting an undefined nativeCancelRequestAnimationFrame exception in:

AnimationFrame.prototype.cancel = function(id) {
    if (hasNative && !this._isCustomFrameRate) return nativeCancelRequestAnimationFrame(id);
    delete this._callbacks[id - this._tickCounter];
};

Did you mean to use nativeCancelAnimationFrame instead of nativeCancelRequestAnimationFrame?

useNative false results in illegal invocation error

Defining usage of AnimationFrame as:

var animFrame = new AnimationFrame({
          frameRate: 30,
          useNative: false
});

will cause Uncaught typerror: illegal invocation to appear in console: it seems to be at line 175:

self._callbacks[id](AnimationFrame.perfNow())

Tested with newest version 0.1.4 using Chrome Version 32.0.1700.107 m on Windows 7

Mocha reporting global leaks when using animation-frame

Error: global leak detected: i