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/utilsImport
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.