Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chrisdickinson/raf
requestAnimationFrame polyfill library
https://github.com/chrisdickinson/raf
Last synced: about 2 months ago
JSON representation
requestAnimationFrame polyfill library
- Host: GitHub
- URL: https://github.com/chrisdickinson/raf
- Owner: chrisdickinson
- License: mit
- Created: 2012-12-28T04:48:04.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2022-01-31T14:35:47.000Z (over 2 years ago)
- Last Synced: 2024-04-27T20:44:00.377Z (2 months ago)
- Language: JavaScript
- Size: 45.9 KB
- Stars: 744
- Watchers: 18
- Forks: 54
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-list - raf
- awesome-stars - raf - requestAnimationFrame polyfill library (JavaScript)
- awesome-ponyfills - raf - [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (Browser Features)
- awesome-star-libs - chrisdickinson / raf
README
# raf
[](http://ci.testling.com/chrisdickinson/raf)
requestAnimationFrame polyfill for node and the browser.
```js
var raf = require('raf')
raf(function tick() {
// Animation logic
raf(tick)
})
```
**Note:** The stream/event emitter logic found in versions prior to 1.0.0 can be found in [raf-stream](https://www.npmjs.org/package/raf-stream).
## Getting started
### CommonJS (Node, Browserify, Webpack, etc.)
Install `raf` from npm:
```bash
npm install --save raf
```
Require it like you would any other module:
```js
const raf = require('raf')
```
### AMD (require.js, etc)
Download the UMD-bundle from [wzrd.in](https://wzrd.in/standalone/raf@latest) (remember to include the current version number in the filename).
Add it to your AMD module loader config and require it like you would any other module:
```html
define(['raf'], raf => {...})
```
### ``
Download the UMD-bundle from [wzrd.in](https://wzrd.in/standalone/raf@latest) (remember to include the current version number in the filename).
Then include it via a script tag:
```html
<script src="raf-x.x.x.js">
```
The API will be available on `window.raf`.
## API
[Documentation at Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame), [W3 Specification](http://www.w3.org/TR/animation-timing/#requestAnimationFrame)
### var handle = raf(callback)
`callback` is the function to invoke in the next frame. `handle` 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.
### raf.cancel(handle)
`handle` is the entry identifier returned by `raf()`. Removes the queued animation frame callback (other queued callbacks will still be invoked unless cancelled).
### raf.polyfill([object])
Shorthand to polyfill `window.requestAnimationFrame` and `window.cancelAnimationFrame` if necessary (Polyfills `global` in node).
Alternatively you can require `raf/polyfill` which will act the same as `require('raf').polyfill()`.
If you provide `object` the polyfills are attached to that given object, instead of the inferred global.
Useful if you have an instance of a fake `window` object, and want to add `raf` and `caf` to it.
## Acknowledgments
Based on work by Erik Möller, Paul Irish, and Tino Zijdel (https://gist.github.com/paulirish/1579671)
## License
MIT