easings

Contains various easing functions for use in animations. Each easing function takes a single argument x that represents the progress of the animation as a value between 0 and 1, and returns a value between 0 and 1 that represents the eased progress of the animation.

Installation

npm install @madeinhaus/utils

Import

import { easings } from '@madeinhaus/utils';

Functions

linear

linear(x: number): number

Returns the progress of the animation linearly.

easeInQuad

easeInQuad(x: number): number

Returns the progress of the animation with a quadratic easing in.

easeOutQuad

easeOutQuad(x: number): number

Returns the progress of the animation with a quadratic easing out.

easeInOutQuad

easeInOutQuad(x: number): number

Returns the progress of the animation with a quadratic easing in and out.

easeInCubic

easeInCubic(x: number): number

Returns the progress of the animation with a cubic easing in.

easeOutCubic

easeOutCubic(x: number): number

Returns the progress of the animation with a cubic easing out.

easeInOutCubic

easeInOutCubic(x: number): number

Returns the progress of the animation with a cubic easing in and out.

easeInQuart

easeInQuart(x: number): number

Returns the progress of the animation with a quartic easing in.

easeOutQuart

easeOutQuart(x: number): number

Returns the progress of the animation with a quartic easing out.

easeInOutQuart

easeInOutQuart(x: number): number

Returns the progress of the animation with a quartic easing in and out.

easeInQuint

easeInQuint(x: number): number

Returns the progress of the animation with a quintic easing in.

easeOutQuint

easeOutQuint(x: number): number

Returns the progress of the animation with a quintic easing out.

easeInOutQuint

easeInOutQuint(x: number): number

Returns the progress of the animation with a quintic easing in and out.

easeInSine

easeInSine(x: number): number

Returns the progress of the animation with a sine easing in.

Usage

import { easings } from '@madeinhus/utils';
 
const duration = 1000; // 1 second
const startTime = performance.now();
 
function animate() {
  const elapsedTime = performance.now() - startTime;
  const progress = Math.min(elapsedTime / duration, 1);
  const easedProgress = easings.easeInOutQuad(progress);
  // Update animation based on eased progress
  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

In this example, we import the easings object from the @madeinhaus/utils package and use the easeInOutQuad easing function to ease the progress of an animation over time.