- ds
- Foundations
- Motion
Motion
One easing curve, short durations, reduced motion respected.
Easing and duration
One curve for everything: cubic-bezier(0.2, 0.7, 0.1, 1). It starts quick and settles slowly, so things feel responsive without bouncing.
| Token | Value | Use |
|---|---|---|
--ease | cubic-bezier(0.2, 0.7, 0.1, 1) | All transitions and entrances. |
--dur-fast | 0.15s | Hover colour and border changes. |
--dur | 0.2s | Toggles, toasts, opacity changes. |
--dur-slow | 0.45s | Bars and meters changing value. |
--dur-reveal | 0.7s | Content fading in on scroll. |
Top: --ease. Bottom: linear, for comparison.
Motion that explains
In diagrams, motion carries meaning: links flow the way data moves. topo offers four styles. Animations pause when the figure scrolls out of view.
anim=flow · packets · comet · pulse
Entrances
Fades up 10px over --dur-reveal.
Code
<p data-reveal class="in">Fades up 10px over --dur-reveal.</p>Add data-reveal to a block and the class in when it enters the viewport (an IntersectionObserver, a few lines). Without JavaScript the content is simply visible.
Do
- Animate opacity and transform only.
- Keep hover changes under 0.2s.
- Respect prefers-reduced-motion. ds.css already does.
Don't
- Bounce, spring or overshoot.
- Animate layout properties like height on large blocks.
- Loop anything that is not live data.