request-animation-number

Light animation library based on requestanimationframe

Usage no npm install needed!

<script type="module">
  import requestAnimationNumber from 'https://cdn.skypack.dev/request-animation-number';
</script>

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 to learn more.

Syntax

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

Example

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

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

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

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 to learn more.
  • If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.
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.