Snappy staggered subtitle entrance
Supporting lines should arrive faster than the headline and with a tighter stagger, so they read as a beat behind it rather than competing with it. Use it for taglines, dates and calls to action under a main title.
enter + stagger: wrote 2 animated properties, staggered 15ms. Computed by ramin's planner when this page was built.
What you type
“Make the kicker enter from below with a 15ms stagger, snappy”
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
- Kicker.appearance.opacity
- 0 → 1 over 0.3575s, expo.out, stagger 15ms
- Kicker.transform.position.y
- -85 → -190 over 0.3575s, expo.out, stagger 15ms
The easing
expo.outStarts very fast and brakes hard into the final position. It reads as sharp and confident, with no overshoot.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.