# request-animation-number

> Light animation library based on requestanimationframe

Latest version **1.0.8** (published 2021-11-21) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install request-animation-number
pnpm add request-animation-number
yarn add request-animation-number
bun add request-animation-number
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2021-11-21 |
| First published | 2021-06-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ahmed Al-Absi |
| Maintainers | alabsi91 |
| Keywords | animation, keyframe, requestanimationframe, js, transition, ease, easing, visual-timing-functions |

## Links

- npm: https://www.npmjs.com/package/request-animation-number
- Repository: https://github.com/alabsi91/request-animation-number
- Homepage: https://github.com/alabsi91/request-animation-number#readme
- Issues: https://github.com/alabsi91/request-animation-number/issues
- npm.io page: https://npm.io/package/request-animation-number

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.8 (latest) — 2021-11-21
- 1.0.7 — 2021-11-20
- 1.0.6 — 2021-10-05
- 1.0.5 — 2021-06-15
- 1.0.4 — 2021-06-14
- 1.0.3 — 2021-06-14
- 1.0.2 — 2021-06-13
- 1.0.1 — 2021-06-13
- 1.0.0 — 2021-06-13

## README

# Request Animation Number

### Features

- Light animation library for modern JavaScript.

- Based on ` requestAnimationFrame()` method which generates smooth animation and transitions.

- Matches animation speed on different screens refresh rates. _Tested on 60Hz and 145Hz_

- Animate anything takes a value as number.

  > E.g. scrolling , width, color ...

- Contains most popular Easing functions with the ability to provide your own.

  > E.g. Ease In, Ease Out, Ease In Out, .... and more

- Check [easings.net](https://easings.net/) to learn more.

### Syntax

- `requestNum(options: object, callback: (...animatedNumbers: number[]) => void)`

### Example

```javascript
import { requestNum } from 'request-animation-number';

const element = document.getElementById('square');

const animationOptions = {
  from: [0, 1],
  to: [90, 2],
  duration: 500,
  easingFunction: 'easeInOutBack',
};

requestNum(animationOptions, (rotate, scale) => {
  element.style.transform = `rotate(${rotate}deg) scale(${scale})`;
  // ...
});
```

### How to animate colors

- you can ether use `rgb` values as an array of numbers or you can use `colorToArr()` method to convert colors from `string` to
  array of numbers which represents `rgba` values.

- `colorToArr()` method takes a `string` and returns an array of number as `[r, g, b, a]`.
- `colorToArr()` accept following formats: `rgb(r, g, b) , rgba(r, g, b, a) , hex (e.g. "#ffffff ") , color name (e.g. "red")`

#### Example for colors animation

```javascript
import { requestNum, colorToArr } from 'request-animation-number';

const element = document.getElementById('circle');

const animationOptions = {
  from: colorToArr('brown'), // returns [163, 54, 54]
  to: colorToArr('#000000'), // returns [0, 0, 0]
  duration: 1000,
  easingFunction: 'easeInSine',
};

requestNum(animationOptions, (r, g, b) => {
  element.style.backgroundColor = `rgb(${r} ${g} ${b})`;
});
```

### Sequential animation

- `requestNum()` is an asynchronous function.

- You can use `await` to create sequences of animation by waiting for the first animation to end then starting the next.

#### Example for sequential animation

```javascript
import { requestNum } from 'request-animation-number';

async function animate() {
  const circle1 = document.getElementById('circle1');
  const circle2 = document.getElementById('circle2');

  await requestNum({ to: 350 }, left => (circle1.style.left = left + 'px'));

  requestNum({ to: 350 }, right => (circle2.style.right = right + 'px'));
}

animate();
```

- Note that if `replay` set to `-1` it will repeat infinitely.

#### Another way to make sequential animation without using asynchronous function

```javascript
import { requestNum } from 'request-animation-number';

function animate() {
  const circle1 = document.getElementById('circle1');
  const circle2 = document.getElementById('circle2');

  requestNum({ to: 350 }, left => {
    circle1.style.left = left + 'px';

    // detect when the animation ends
    if (left === 350) {
      requestNum({ to: 350 }, right => (circle2.style.right = right + 'px'));
      // ...
    }
  });
}

animate();
```

### Options _[Object]_

#### from: _[ Number | Numbers[] ]_ _[optional]_

- Animation will starts form this number/s.
- Takes one number or array of numbers or if a value not provided will be set to `0` by default.
- **Initial Value** `0 | [0, 0 , ...]`

#### to: _[ Number | Numbers[] ]_

- Animation will ends at this number/s.
- takes one number or array of numbers.

#### duration: _[Number]_ _[optional]_

- The duration the function will take to change the number/s (in milliseconds).
- **Initial Value** `350`.

#### delay: _[Number]_ _[optional]_

- Delay time before starting the animation (in milliseconds).
- **Initial Value** `0`.

#### easingFunction: _[ String | Function ]_ _[optional]_

- Easing functions specify the rate of change of the number over time.
- Takes a String or Function.
- **Initial Value** `"linear"`.
- Avaliable Easing functions :
  `"linear", "easeInSine", "easeOutSine", "easeInOutSine", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInBack", "easeOutBack", "easeInOutBack", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBounce", "easeOutBounce", "easeInOutBounce"`
- Check [easings.net](https://easings.net/) to learn more.
- If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.

```javascript
function easeInQuad(x) {
  return x * x;
}
```

#### yoyo: _[boolean]_ _[optional]_

- Animate back to the starting point if `true`.
- **Initial Value** `false`.

#### yoyoDuration: _[Number]_ _[optional]_

- The duration to go back to starting point (in milliseconds).
- **Initial Value** `duration`.

#### yoyoDelay: _[Number]_ _[optional]_

- Delay time before starting the yoyo animation (in milliseconds).
- **Initial Value** `delay`.

#### replay: _[Number]_ _[optional]_

- Replay count after the first play.
- infinite if replay value is set to `-1`.
- **Initial Value** `0`.

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