Headline leaves letter by letter

The mirror of a staggered reveal. If the headline came in one letter at a time, sending it out the same way makes the piece feel designed end to end rather than only at the start.

Try this in the studio All recipes

exit + stagger: wrote 2 animated properties, staggered 30ms. Computed by ramin's planner when this page was built.

What you type

“Make the headline exit letter by letter, 30ms apart”

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.transform.position.y: 40 → -65 over 0.52s, expo.out, stagger 30ms
Headline.appearance.opacity: 1 → 0 over 0.416s, quad.in, stagger 30ms

The easing

expo.outStarts very fast and brakes hard into the final position. It reads as sharp and confident, with no overshoot.

quad.inA mild acceleration away from the start. Used for fading out, so the layer goes before the eye follows it.

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.

Related recipes

Letter-by-letter headline reveal with overshoot

“Reveal the headline letter by letter, 30ms apart, from below, overshoot slightly”

Fast headline exit

“Make the headline exit quickly”