Letter-by-letter headline reveal with overshoot
The workhorse of kinetic typography. Each character gets the same rise and settle, offset by 30ms, so the word reads as a wave. Short headlines can take a longer stagger; long ones need it shorter or the last letter arrives too late.
enter + stagger: wrote 2 animated properties, staggered 30ms. Computed by ramin's planner when this page was built.
What you type
“Reveal the headline letter by letter, 30ms apart, from below, overshoot slightly”
The studio opens on its starter project, a headline, a kicker, a backdrop and a ring of chips, and applies this prompt to it. Change any number afterwards.
What lands in the inspector
- Headline.appearance.opacity
- 0 → 1 over 0.65s, back.out +4%, stagger 30ms
- Headline.transform.position.y
- 145 → 40 over 0.65s, back.out +4%, stagger 30ms
The easing
back.outStarts fast, travels a little past the target and settles back onto it. The overshoot percentage is how far past it goes.Time the stagger
Work out each element's start and end and the total length of a staggered entrance with the stagger animation calculator, and copy it as CSS.