Per-word transform snaps with bounded cubic-bezier overshoot — documents where CSS easing is enough vs. where real spring physics need JS. Three motion types: a vertical rebound, a horizontal slide-in, and a scale snap.
Elastic snap · cubic-bezier boundary
Word-level transforms use a bounded overshoot curve to create elastic text snap without turning the pattern into a JavaScript spring simulation. Three variants demonstrate a tight product badge, a staggered headline, and a subtle toast confirmation.
Tight rebound · short label
A compact badge rebounds into place from below with one visible overshoot. translateY + scale snap, transform isolated to the text run — surrounding layout never recalculates during the cascade.
Word stagger · readable dwell
Each word slides in horizontally from the left with a soft elastic settle — gentler than a vertical rebound, more cinematic. Word-level spans (not per-character) keep the headline readable during the entrance.
Subtle rebound · feedback tone
A small confirmation label pops with scale-only — no translation. Reads as gentle feedback rather than a playful bounce. Safer boundary for production UI where a translating toast in a stack would feel jumpy.
Elastic text custom easing uses word-level transform spans with a bounded overshoot cubic-bezier, giving one snap-and-settle motion without a JavaScript spring solver.
1<p class="elastic-text-recipe"><span style="--i: 0">New</span><span style="--i: 1">Motion</span></p><style>7.elastic-text-recipe {display: flex;flex-wrap: wrap;justify-content: center;gap: 0 .4em;margin: 0;color: #e0f2fe;font: 800 clamp(1.6rem, 7vw, 3.2rem)/1 ui-sans-serif, system-ui;text-shadow: 0 0 22px rgba(103, 232, 249, .14);}17.elastic-text-recipe span {display: inline-block;transform-origin: 50% 100%;animation:21elastic-text-recipe-snap 2.6s cubic-bezier(.22,1.45,.36,1) infinite both;22animation-delay: calc(var(--i) * 90ms);}@keyframes elastic-text-recipe-snap {250% { opacity: 0; transform: translateY(1.1em) scale(.92); }35% { opacity: 1; transform: translateY(-.28em) scale(1.05); }55%, 88% { opacity: 1; transform: translateY(0) scale(1); }100% { opacity: 0; transform: translateY(-.35em) scale(.96); }}30@media (prefers-reduced-motion: reduce) {.elastic-text-recipe span {animation: none;opacity: 1;transform: none;}}</style>
Usually no for interface copy. Word-level spans preserve readability and reduce element count. Character-level elastic motion is better reserved for short logos or playful one-word treatments.
Same 1.5s arrival keyframe (opacity 0 → 1, translateY 18px → 0). linear timing climbs the entire distance at a constant rate — the word slides in flat without feeling like motion you can recognise. cubic-bezier(.22, 1.45, .36, 1) hits y > 1 around 38%, overshoots past the rest position, then settles — one elastic snap that reads as the word arriving.
Use cubic-bezier for bounded, decorative text snaps that only need one overshoot. Use a spring library when the motion depends on gesture velocity, interruption, chained physics, or repeated rebounds.
Same cubic-bezier overshoot animation, same delay stride of 70ms. Per-character stagger fires the snap on every letter — eight separate bounces overlap into visual noise. Per-word stagger sends each whole word through one snap, so two clean overshoots arrive in sequence and the phrase stays readable.
Usually no for interface copy. Word-level spans preserve readability and reduce element count. Character-level elastic motion is better reserved for short logos or playful one-word treatments.
Use cubic-bezier for bounded, decorative text snaps that only need one overshoot. Use a spring library when the motion depends on gesture velocity, interruption, chained physics, or repeated rebounds.
Skip the overshoot and show the final text immediately. A subtle opacity change can be acceptable, but avoid replacing translate motion with scale pops for users who requested less motion.
Per-word elastic snap reveal uses bounded cubic-bezier() overshoot to simulate a spring without real physics. The pattern documents where CSS easing curves are honest enough (one bounce, then settle) vs. where you need real spring math (multi-bounce decays, velocity-dependent damping — those want JS).
Reach for elastic snaps on word-by-word hero reveals, product callouts, and any short string where one playful bounce per word reads as personality. Skip it for content users read multiple times — the bounce stops being cute by the third re-read. Skip it for forms or controls; a bouncy submit button looks unserious.
Each word is wrapped in a <span> with transform: translateY(0.5em) and opacity: 0 at rest. A keyframe animates them to translateY(0) + opacity: 1 with an overshoot easing like cubic-bezier(.34, 1.56, .64, 1). The critical magic is the bezier’s second control point (Y > 1) which pushes the value past 100% before settling — that overshoot reads as the spring. Per-word animation-delay creates the stagger. For multi-bounce springs that CSS cannot fake well, switch to Web Animations API with a longer keyframe array.
Single-bounce CSS overshoots feel honest; multi-bounce decays require either a precise multi-stop keyframe array or a real physics library (e.g. react-spring, Motion One) — do not try to fake multi-bounce with a single cubic-bezier or the curve oscillates unnaturally. The overshoot pushes content vertically past adjacent layout; check that no sibling element gets visually clipped. Per-word spans can leak white-space between siblings on layout engines that strip inline whitespace differently — use display: inline-block + explicit space characters between spans.
Wrap the parent with aria-label holding the full sentence so the per-word spans do not split the announcement. Under prefers-reduced-motion: reduce drop the overshoot keyframe and the per-word delay so the entire phrase appears simultaneously without bounce. Vestibular users find overshoot motion uncomfortable — this is one of the strongest cases for honoring the media query.
Elastic text should use transform-only motion so the words bounce without pushing surrounding layout. Custom cubic-bezier curves can imply spring behavior without a JavaScript physics loop.
The overshoot is the taste decision. Too much rebound feels playful but can hurt readability, especially in product UI. Reduced motion should remove the bounce while preserving the final emphasis or staggered order.