Letters cascade in from the left
A horizontal cascade follows the reading direction, so the word assembles in the order it is read. With a smooth curve and no overshoot it suits editorial and documentary titles.
enter + stagger: wrote 2 animated properties, staggered 25ms. Computed by ramin's planner when this page was built.
What you type
“Make the headline enter one by one from the left, 25ms apart, smoothly”
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, cubic.out, stagger 25ms
- Headline.transform.position.x
- -105 → 0 over 0.65s, cubic.out, stagger 25ms
The easing
cubic.outA gentle deceleration into place. Smooth, 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.