draf

Description

draf is a safe way to play requestAnimationFrame and cancelAnimationFrame. Might be used to build animation library, or just to build simple gallery. This script also provides better replacement for setTimeout, clearTimeout, setInterval, and clearInterval. They are requestTimeout, clearRequestTimeout, requestInterval and clearRequestInterval

To be clear, this script is copy & mixing of:

• https://gist.github.com/KrofDrakula/5318048
• https://gist.github.com/joelambert/1002116

And say thanks very much to:

• Erik Möller http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
• Paul Irish https://gist.github.com/paulirish/1579671
• Nicolas Gryman https://github.com/ngryman/raf.js
• Klemen Slavič https://gist.github.com/KrofDrakula/5318048
• Joe Lambert https://gist.github.com/joelambert/1002116

Benefits

Benefits of using requestAnimationFrame

• Browser can optimize it, so your animation would be smoother
• Animation/interval/timeout in inactive tab will stop, it means less CPU, GPU, and memory usage
• Also means battery friendly

Download

Click this

Usage

Just use this like in pure requestAnimationFrame & cancelAnimationFrame :

• requestAnimationFrame
• cancelAnimationFrame
  If you want read more about how to use pure requestAnimationFrame, here is excellent articles :
  http://css-tricks.com/using-requestanimationframe/
  http://creativejs.com/resources/requestanimationframe/
  https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
  http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
  http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

Also providing the drop-in replacement for setTimeout, clearTimeout, setInterval, clearInterval. This will use the requestAnimationFrame when possible for better performance. Just use this replacement like their pure way :

• requestTimeout
• clearRequestTimeout
• requestInterval
• clearRequestInterval

License

Public License

Note

Feel free to contact me on twitter if you find issue/ bug in this script
^{@drizzlecloudy or drizzlecloudy {at} gmail.com}