# raf

> requestAnimationFrame polyfill for node and the browser

Latest version **3.4.1** (published 2018-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install raf
pnpm add raf
yarn add raf
bun add raf
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.4.1 |
| Published | 2018-11-02 |
| First published | 2012-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/raf) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 737 |
| Author | Chris Dickinson |
| Maintainers | chrisdickinson, cmtegner |
| Keywords | requestAnimationFrame, polyfill |

## Links

- npm: https://www.npmjs.com/package/raf
- Repository: https://github.com/chrisdickinson/raf
- Homepage: https://github.com/chrisdickinson/raf#readme
- Issues: https://github.com/chrisdickinson/raf/issues
- npm.io page: https://npm.io/package/raf

## Dependencies (1)

- [performance-now](https://npm.io/package/performance-now.md) ^2.1.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 3.4.1 (latest) — 2018-11-02
- 3.4.0 — 2017-10-02
- 3.3.2 — 2017-05-04
- 3.3.1 — 2017-05-04
- 3.3.0 — 2016-08-16
- 3.2.0 — 2016-02-17
- 3.1.0 — 2015-07-16
- 3.0.0 — 2015-05-24
- 2.0.4 — 2014-10-02
- 2.0.3 — 2014-08-17
- 2.0.2 — 2014-07-28
- 2.0.1 — 2014-06-09
- 2.0.0 — 2014-05-23
- 1.0.1 — 2014-05-14
- 1.0.0 — 2014-05-14
- … 9 more at https://npm.io/package/raf/versions

## README

# raf

[![Browser Support](http://ci.testling.com/chrisdickinson/raf.png)](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 => {...})
```

### `<script>`

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"></script>
```

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

---
_Source: https://npm.io/package/raf · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._