timeline(steps) plays ordered steps on one clock. Each step starts when the
previous one ends, minus its overlap, so a three-part entrance reads as one
gesture rather than three.
import { timeline } from '@ds-gn/motion';
timeline([
{ el: heading, preset: 'slideUp', duration: 'moderate' },
{ el: asset, preset: 'fade', overlap: 200 },
{ el: cta, preset: 'scaleIn', overlap: 160 },
]);With 240ms steps, the asset starts at 40ms (240 − 200) and the CTA at 120ms (40 + 240 − 160); the whole entrance takes 360ms. Without overlaps it would take 720ms.
| Step option | Type | Default |
|---|---|---|
el | Element | — |
preset | 'slideUp' | 'fade' | 'scaleIn' | — |
direction | 'enter' | 'exit' | 'enter' |
duration | 'quick' | 'moderate' | number | 'moderate' (enter), 'quick' (exit) |
easing | token name or CSS easing | 'emphasized' (enter), 'standard' (exit) |
overlap | ms | 0 |
delay | ms, added after placement | 0 |
An element can appear in more than one step, for example an entrance and a later exit. The later step plays on top of the earlier one.
A step can also be a whole sequence: pass targets and the
sequence options instead of el. Its overlap counts back from the
end of the previous step, and the next step’s overlap counts back from the end
of the sequence’s last element.
timeline([
{ el: heading, preset: 'slideUp' },
{ targets: cards, preset: 'slideUp', stagger: 60, overlap: 120 },
{ el: cta, preset: 'scaleIn', overlap: 100 },
]);timeline returns a Playback handle.