@vysmo/easings Library Math

Easings for the modern web.

A curated catalog of easings, parametric builders (spring, bezier, rough, wiggle, smooth, gravity, breathe), and modifiers (reverse, mirror, yoyo). CSS export via toCSSLinear. Pure math, zero platform assumptions.

22 families
~2 KB gzipped
0 runtime deps
CSS export linear() built-in

$ pnpm add @vysmo/easings View on GitHub

Duration2.0s

0.00

Easing

power2Out

Settings

Variant

Modifier

Cubic (t³). Workhorse default — CSS's ease is close to power2.out.

Two ways to use it

Hand the easing function to @vysmo/animations, or sample it once and ship a CSS linear() value.

JavaScript — drive any value

import { animate } from "@vysmo/animations";
import { power2Out } from "@vysmo/easings";

animate({
  from: 0,
  to: 1,
  duration: 600,
  ease: power2Out,
  onUpdate: (v) => element.style.opacity = String(v),
});

CSS — bake the curve into a property

import { toCSSLinear } from "@vysmo/easings/css";
import { spring } from "@vysmo/easings";

const ease = spring.with({ stiffness: 220, damping: 18 });

document.documentElement.style.setProperty(
  "--ease-pop",
  toCSSLinear(ease, 32),
);

Read the full docs

Built for

Animation libraries

Drop into @vysmo/animations, GSAP, Motion, Anime.js, or any library that accepts a (t: number) => number. The shape is the universal contract.

CSS-driven motion

toCSSLinear(ease, 32) samples any curve into a CSS Easing Functions Level 2 linear() value — springs and bouncing curves, native to CSS.

Scroll-driven progress

Pair with @vysmo/scroll to ease scroll progress before driving a transition or transform. Linear scroll feels mechanical; eased scroll feels designed.

Framer / Motion-style overshoot

anticipate, back, elastic and the spring builder give you the wind-up and overshoot vocabulary used in Framer Motion / GSAP without their dependencies.

Designer / engineer hand-off

Export a cubic-bezier() from any design tool and feed it to bezier(p1x, p1y, p2x, p2y). Same curve in code, no rounding drift across the chain.

Custom curve research

Use defineEasing / defineParametricEasing to wrap your own math with the same metadata, exact-endpoint guarantee, and parametric .with(...) shape as the built-ins.