Staggered headline with a 12% overshoot
Say the overshoot as a number and the planner writes that number. 12% with a 40ms stagger is loud enough for a sale or launch announcement. Halve both when the brand is quieter.
enter + stagger: wrote 2 animated properties, staggered 40ms. Computed by ramin's planner when this page was built.
What you type
“Make the headline enter from below with a 40ms stagger and overshoot 12%”
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 +12%, stagger 40ms
- Headline.transform.position.y
- 145 → 40 over 0.65s, back.out +12%, stagger 40ms
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.