Easae

A small utility for easy easing.

---

Features

• Browser AND NodeJs support.
• Built in easing functions.
• Custom easing function.
• Easy to use.
• Custom duration, delay, and framerate.

Install

npm i easae

Usage

import { easae, easeInCubic } from 'easae';

const modal = document.querySelector('.modal');

easae({
  // Easing function you want to use, you can find the list further in the doc.
  easing: easeInCubic,
  // This function will be called on each tick of the easing.
  tick: (t, u) => {
    // 't' is going from 0 to 1 and 'u' is going from 1 to 0 (u = 1-t).
    // The tick function will be called in a requestAnimationsFrame on the browser, and a setTimeout in Node.

    // Bellow - as an example - we set the new scale of the modal.
    // But the idea is that you can animate anything in here using 't' and 'u'.
    modal.style.transform = `scale(${t})`;

    // For example we could set a React state:
    setProgressBarWidth(t * 100); // t * 100 so it's in %
  },
  // The duration of the easing in milliseconds
  duration: 300,
  // The delay before the easing starts in milliseconds (default is 0)
  delay: 100,
  // The refresh rate of the easing (default is 60)
  rate: 144,
});

Easing functions

You can find the list of every easing functions on https://easings.net. They are all exported from easae (for example import { easeInBounce } from 'easae').

Or you can make your own:

easae({
  easing: (x) => x, // linear
  tick: (t) => {
    // ...
  },
  duration: 500,
});

Terminal based animations

const { easae, easeOutBounce } = require('easae');

easae({
  easing: easeOutBounce,
  tick: (t) => {
    console.clear();
    console.log('■'.repeat(t * 100), '\n');
  },
  duration: 1300,
});

Chained animations

easae returns a promise that resolves when the easing is finished. So you can await this promise, then start the next one.

import { easae, easeOutBounce, easeInCubic } from 'easae';

async function animate() {
  // first
  await easae({
    easing: easeOutBounce,
    tick: (t) => {
      // ...
    },
    duration: 1300,
  });

  // second
  await easae({
    easing: easeInCubic,
    tick: (t) => {
      // ...
    },
    duration: 500,
  });
}

animate();

Examples

See the examples folder.

Inspiration

If you're familiar with Svelte's animation API, you've probably noticed the resemblance.

License

MIT