Easings

import { easeInOutCubic
, easeOutQuad
 } from '@studiometa/js-toolkit/utils';

easeOutQuad
(0.5); // 0.75

An EasingFunction takes a 0 → 1 progress and returns a shaped 0 → 1 value.

Choosing one

Eight curves, three directions each. Every out and in-out is derived from its in.

Curve	In	Out	In-out
linear	`easeLinear`	—	—
quad	`easeInQuad`	`easeOutQuad`	`easeInOutQuad`
cubic	`easeInCubic`	`easeOutCubic`	`easeInOutCubic`
quart	`easeInQuart`	`easeOutQuart`	`easeInOutQuart`
quint	`easeInQuint`	`easeOutQuint`	`easeInOutQuint`
sine	`easeInSine`	`easeOutSine`	`easeInOutSine`
circ	`easeInCirc`	`easeOutCirc`	`easeInOutCirc`
expo	`easeInExpo`	`easeOutExpo`	`easeInOutExpo`

Deriving one

createEaseOut(easeIn: EasingFunction): EasingFunction
createEaseInOut(easeIn: EasingFunction): EasingFunction

Every out and in-out above is one of these applied to its in. Which means a custom curve gets its whole family for two lines:

import { createEaseInOut
, createEaseOut
, type EasingFunction
 } from '@studiometa/js-toolkit/utils';

const easeInBack
: EasingFunction
 = (progress
) => progress
 * progress
 * (2.7 * progress
 - 1.7);

const easeOutBack
 = createEaseOut
(easeInBack
);
const easeInOutBack
 = createEaseInOut
(easeInBack
);

That is why only the eight in functions are written out and the other sixteen are derived: an out is an in run backwards, and writing it twice is how the two drift apart.

createEaseOut

createEaseOut(easeIn: EasingFunction): EasingFunction

Mirror an in curve into its out.

createEaseInOut

createEaseInOut(easeIn: EasingFunction): EasingFunction

Compose an in curve into its symmetric in-out.

Using one

import { easeOutCubic
, lerp
 } from '@studiometa/js-toolkit/utils';

function positionAt
(progress
) {
  return lerp
(0, 400, easeOutCubic
(progress
));
}

An easing shapes a progress, so it pairs with a value that already runs 0 → 1: a useScrollProgress() subscriber, or a map() of anything else.

They do not animate

There is no clock here — an easing is a pure function of a progress you already have.

For a value chasing a target frame by frame, use damp() or smoothTo().
For time-based playback, stagger and sequencing, that is the separate ui-animation package. tween and animate are not shipped.

The functions

Each takes a 0 → 1 progress and returns the shaped value.

easeLinear

easeLinear(progress: number): number

The identity. It exists so a call site can name "no easing" rather than branch on undefined.

easeInQuad

easeInQuad(progress: number): number

easeOutQuad

easeOutQuad(progress: number): number

easeInOutQuad

easeInOutQuad(progress: number): number

easeInCubic

easeInCubic(progress: number): number

easeOutCubic

easeOutCubic(progress: number): number

easeInOutCubic

easeInOutCubic(progress: number): number

easeInQuart

easeInQuart(progress: number): number

easeOutQuart

easeOutQuart(progress: number): number

easeInOutQuart

easeInOutQuart(progress: number): number

easeInQuint

easeInQuint(progress: number): number

easeOutQuint

easeOutQuint(progress: number): number

easeInOutQuint

easeInOutQuint(progress: number): number

easeInSine

easeInSine(progress: number): number

easeOutSine

easeOutSine(progress: number): number

easeInOutSine

easeInOutSine(progress: number): number

easeInCirc

easeInCirc(progress: number): number

easeOutCirc

easeOutCirc(progress: number): number

easeInOutCirc

easeInOutCirc(progress: number): number

easeInExpo

easeInExpo(progress: number): number

easeOutExpo

easeOutExpo(progress: number): number

easeInOutExpo

easeInOutExpo(progress: number): number

Easings ​

Choosing one ​

Deriving one ​

createEaseOut ​

createEaseInOut ​

Using one ​

They do not animate ​

The functions ​

easeLinear ​

easeInQuad ​

easeOutQuad ​

easeInOutQuad ​

easeInCubic ​

easeOutCubic ​

easeInOutCubic ​

easeInQuart ​

easeOutQuart ​

easeInOutQuart ​

easeInQuint ​

easeOutQuint ​

easeInOutQuint ​

easeInSine ​

easeOutSine ​

easeInOutSine ​

easeInCirc ​

easeOutCirc ​

easeInOutCirc ​

easeInExpo ​

easeOutExpo ​

easeInOutExpo ​