# raf-component

> request animation frame

Latest version **1.1.2** (published 2013-11-30) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2013-11-30 |
| First published | 2013-02-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 34 |
| Maintainers | tjholowaychuk |
| Keywords | animate, requestAnimationFrame, performance |

## Links

- npm: https://www.npmjs.com/package/raf-component
- Repository: https://github.com/component/raf
- Issues: https://github.com/component/raf/issues
- npm.io page: https://npm.io/package/raf-component

## 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

- 1.1.2 (latest) — 2013-11-30
- 1.1.1 — 2013-07-12
- 1.1.0 — 2013-07-12
- 1.0.0 — 2013-05-28
- 0.0.1 — 2013-02-12

## README

# raf

  request animation frame

## Installation

    $ component install component/raf

## Example

  Request the animation frame with `raf(fn)`, cancel with `raf.cancel(id)`.

```js
var x = 0;
var y = 50;
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var raf = require('raf');

function animate() {
  raf(animate);
  draw();
}

var prev = Date.now();
function draw() {
  var curr = Date.now();
  var diff = curr - prev;
  var p = diff / 16;
  ctx.clearRect(0, 0, 900, 300);
  ctx.beginPath();
  ctx.globalAlpha = .5;
  ctx.arc(x, y, 10, 0, Math.PI * 2, false);
  ctx.fill();
  x += 2;
  y += Math.sin(x/20) * 5;
  prev = curr;
}

animate();
```

## License

  MIT

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