Easings

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

easeOutQuad(0.5); // 0.75

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

• The 24 functions
• Deriving one
• Usage
• What they are not for

The 24 functions

Eight curves, three directions each:

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

easeLinear is the identity, and it exists so a call site can name "no easing" rather than branch on undefined.

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

Usage

import { easeOutCubic, lerp } from '@studiometa/js-toolkit-v4/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.

What they are not for

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.