A recipe, not a description.

A read hands back the mechanism itself: the node under control, the curve with its four control points, the duration, the delay, the trigger and the step between siblings. In words your agent can act on, or as JSON it can compile.

THE SHAPE

target

h1 > span:nth(2)

The node the animation actually drives, not the wrapper around it

trigger

viewport-enter

How it starts: viewport, scroll scrub, loop, timer, hover, click

duration

1000 ms

Declared by the engine when it is there, fitted by the sampler when it is not

easing

cubic-bezier(.23, 1, .32, 1)

The four control points, not the name of a preset

delay

0 ms

Measured against the trigger, not against page load

stagger

100 ms × 3

The step between siblings, and how many of them there are

source

waapi

Where the answer came from — and how sure it is

CURVES WE HAVE MEASURED

These three came out of a single reference page and cover most of what a premium site does. mvoom returns the control points; the name is only there so you can talk about it.

revealcubic-bezier(.23, 1, .32, 1)600 ms · the entrance that carries most of a page

wipecubic-bezier(.87, 0, .13, 1)1200 ms · the clip-path pass, slow in and slow out

out-expocubic-bezier(.16, 1, .3, 1)the exit that decelerates almost to a stop

WHERE IT STAYS QUIET

Three of five reference sites returned nothing to the Web Animations API. GSAP writes inline styles from its own loop and never registers an animation, so asking the browser gets you an empty list.

That is when the sampler takes over: it watches the property that is actually changing, normalises the series and fits it against a library of known easings. The fit reports its own residual, so a recipe that came from sampling never pretends to be a declaration.

NEVER A PRETTY GUESS

WHAT IT COSTS

The recipe is free. You pay only if you want the component built from it, at a fixed price quoted before you decide.

SEE PRICING →