Easing functions (tween)

Seven easing families, each with an easeIn and an easeOut form. They are pure maths: no DOM, no RAF loop of their own. You feed the current time in from your own animation frame and get back the value that frame should use.

Parameters follow Robert Penner's classic convention:

t: current time (how much has elapsed)
b: beginning value
c: change in value (the end value is b + c)
d: duration

Every function clamps internally on t >= d, so calling past the end returns the final value rather than extrapolating out of range.

Usage

import { cubic } from 'ranuts/utils';

const start = performance.now();
const tick = (now: number) => {
  const x = cubic.easeOut(now - start, 0, 300, 600); // 0 → 300 over 600ms
  el.style.transform = `translateX(${x}px)`;
  if (now - start < 600) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

Available curves

Export	Curve	Feel
`quad`	quadratic (`t²`)	The gentlest acceleration; a safe default
`cubic`	cubic (`t³`)	Noticeably snappier than `quad`
`quart`	quartic (`t⁴`)	Strong acceleration
`quint`	quintic (`t⁵`)	Very strong; the end dominates the motion
`sine`	sinusoidal	Softest of all, barely reads as an ease
`expo`	exponential	Nearly still, then a sudden run
`circ`	circular	Slow start, very abrupt finish

API

Every export has the same shape:

interface SpeedType {
  easeIn: EasingFn;
  easeOut: EasingFn;
}

type EasingFn = (t: number, b: number, c: number, d: number) => number;

easeIn / easeOut

Parameters

Parameter	Description	Type	Default
`t`	Elapsed time	`number`	Required
`b`	Beginning value	`number`	Required
`c`	Change in value (end = `b + c`)	`number`	Required
`d`	Duration	`number`	Required

Return

Argument	Description	Type
`value`	The value at time `t`	`number`

Notes

easeIn starts slow and accelerates; easeOut starts fast and decelerates. For UI that responds to a user action, easeOut usually reads better: the element moves immediately and settles, rather than hesitating first.

With thanks to zhangxinxu/Tween.