A polyfill based on request-frame
- Supports ES6, CJS & UMD
- Provides a clean polyfill for requestAnimationFrame & cancelAnimationFrame.
- Tested & working on: IE 9+, FF 25+, Opera 36+, Safari 6.1+, Chrome 30+, iOS 7+, Android 4.4+, Android Chrome 30+.
- Doesn't modify native functions unless specified.
If you need to support legacy browsers see requestFrame for full support from IE5.5+.
npm i request-frame-modern --save
yarn add request-frame-modern
import requestFrameModern from 'request-frame-modern'; // ES6
<script src="request-frame-modern.js"></script> // AMD, IIFE
const requestFrameModern = require('request-frame-modern'); // CJS
requestFrameModern( request | cancel | native ) request is default.
var request = requestFrameModern('request'); // window.requestAnimationFrame | setTimeout
var cancel = requestFrameModern('cancel'); // window.cancelAnimationFrame | cancelTimeout
requestFrameModern('native'); // re/ declares requestAnimationFrame & cancelAnimationFrame
Below is just an example of the requestAnimationFrame API, see links: MDN, MSDN & W3.
var requestId;
function something( useTimeStamp ){
// Do something here
requestId = requestFrameModern(something);
}
requestId = requestFrameModern(something); // Assigns Id & calls "something"
cancel(requestId); // Cancels frame request
request-frame-modern aims to provide an optimal development consistency with the use of animation timing functions across the large number of browsers and devices. This lib is ideal for those who may want to avoid re-assigning native functions, or avoid interfering with other libs that do. requestFrameModern() is purposely not a constructor. The intention is for requestAnimationFrame to be used once or few times during execution since multiple task are expected to be more efficient via a single requestAnimationFrame loop compared to several instances.
Just do it!
npm run test
To launch port 9999
- ./test/
- ./test/compatibility-assignation-amd.html
- ./test/compatibility-assignation.html
- ./test/compatibility-native-amd.html
- ./test/compatibility-native.html
Browser based testing for RAF is imperative
© 2016 Julien Etienne