Word Spring Bounce Heading — CSS Stagger Animation

A word spring bounce heading scales each word up from nothing with a slight overshoot before settling, one word after another, so the whole sentence feels like it is being popped into place rather than simply appearing. The spring overshoot — scaling past 1 before settling back — is what separates this from a plain fade-and-scale entrance and gives it the bouncy, playful energy associated with modern spring-physics motion libraries, without needing one. For a per-letter version of a staggered entrance, see split text or scroll letter stagger; for a scrambled-noise reveal instead of a scale-in, see text scramble.

Splitting the heading into words

wrapWords(el) splits the heading's text on whitespace with el.textContent.trim().split(/\s+/), then rebuilds the innerHTML as one <span class="word"> per word joined by literal spaces. Splitting on words rather than characters keeps each unit legible mid-animation and keeps the total number of staggered elements small even for a long headline — a sentence of 8 words only needs 8 timed delays instead of 40+ per-letter ones.

The spring keyframe without a physics library

@keyframes springPop fakes a spring curve using four keyframe stops instead of a real physics simulation: 0% starts at scale(0) and opacity: 0; 60% overshoots to scale(1.14) at full opacity; 80% undershoots slightly to scale(0.94); 100% settles at scale(1). Combined with cubic-bezier(0.34, 1.56, 0.64, 1) — a standard "back ease" curve whose second control point exceeds 1 — the overshoot in the keyframe and the overshoot in the easing function reinforce each other, producing a springier pop than either alone.

Staggering with setTimeout, not animation-delay

playSpring() loops over every .word and calls setTimeout(() => w.classList.add('pop'), i * 90), adding the .pop class (and therefore triggering the keyframe animation) at 90ms intervals per word index. Using setTimeout to add a class — rather than a CSS animation-delay baked into the stylesheet — makes the whole sequence replayable on demand: the "Replay animation" button forces a reflow with void w.offsetWidth after removing .pop from every word, which resets the animation state so classList.add('pop') can retrigger the keyframe from scratch.

Why the forced reflow matters

Removing and immediately re-adding the same CSS class in the same JavaScript tick does not restart a CSS animation, because the browser batches the style recalculation and never observes the class actually being absent. void w.offsetWidth forces the browser to synchronously compute layout in between the remove and the re-add, which is enough to make the animation replay reliably every time the button is clicked.