The technology behind movement on the page. Used well, motion tells the eye where to look — used badly, it just makes things restless.
Either everything sits frozen, or it blinks and jumps in every corner.
The eye gets led: first the claim, then the proof, then the button.
- A timeline sets the order
Several movements hang together instead of all starting at once. That's the difference between choreography and twitching.
- Scrolling can be the clock
Instead of running on seconds, the animation runs on scroll distance — you drive it with your finger.
- Move what's cheap to move
Shifting and scaling are handled by the graphics card. Animating width and height instead forces the browser to recalculate — exactly what once made this site stutter.
- Too much motion is a mistake
Animation should guide, not entertain. Anyone who set "reduce motion" gets none of it here.
- Trigger (scroll)
- Timeline
- Element A fades in
- Element B follows later
One timeline drives several elements in a fixed order. Without it each starts on its own and the motion looks accidental.
A library for motion. Sequences are described as timelines, so several things run cleanly one after another. For scroll-driven movement there's a dedicated part that reports when an element comes into view.
- Control
- timelines
- Scrolling
- dedicated trigger
- Animates
- position and opacity
- Respects
- reduced-motion settings
Content appearing in the order it should be read
Numbers counting up as they come into view
Transitions between pages without a hard switch
Every animation costs processing time. Animating size or height instead of position forces the browser to recalculate the whole page — that exact mistake once caused stuttering scroll here.
Every card fades in as you scroll — noticeable, but never so slow that you wait for it.