Animation Engine
Text Scroll Choreography
Pin foreground TEXT and choreograph each phrase on scroll — it appears, holds on its corner, then exits at the scroll % you set. Each line can tilt, 3D-warp, and play an Animation Engine Text Effect on its glyphs (split reveal, typewriter, scramble, gradient, neon…). The flat-text sibling of Image Scroll Choreography — three transform layers (pose · warp · glyphs) that never fight. Self-contained pose engine, reduced-motion safe.
Foreground type on scroll
Words that appear, hold, warp, and exit.
The text sibling of Image Scroll Choreography. Add the Text Scroll Choreography element (Animation Engine), type a few foreground lines, anchor each to a corner, and set when it appears, holds and leaves — keyed to the page scroll. Each line can tilt / 3D-warp and play a Text Effect on its letters. The guide is on here (dashed markers + a readout); turn it off before publishing. Keep scrolling ↓
① “Stillness” rises + reveals
At ~12% the headline slides up and its letters do a split reveal — then it just holds on the left while you scroll.
② A warped gold line slides in
At ~28% a second line enters from the right, 3D-tilted and skewed, its words flowing a gradient. The choreography moves the line; the effect animates the glyphs — separately.
③ The whole foreground holds — arc, gradient, read-along
Mid-timeline every line is pinned: the headline, a warped gold line whose words flow a gradient, a heading bent onto an arc (SVG textPath), and a hint that lights letter-by-letter as you scroll — a read-along scrubbed to the page. Four ways to treat type, one shared timeline.
④ Then each exits its own way
Past ~78% they leave — the headline lifts off the top, the gold line slides off right, the hint fades. Scroll back up and it replays.
One-click recipes
Or just type your lines — the recipe times them.
The Recipe picker on the Text tab poses and staggers your lines for you: choose Stacked Rise, Alternating Sides, Center Focus or Diagonal Sweep, add the words, and it spreads their appear / hold / exit across the whole scroll — any number of lines. This scene is Stacked Rise, nothing hand-set (your warp and Text Effect settings still ride along). Keep scrolling ↓
The lines rise and lift in sequence
Stacked Rise anchored all three at the left and had each rise from below, hold, then lift off the top — timed one after another across the scroll. Add a fourth line and it joins the cadence.
Logged in? Open the ✎ editor
With the guide on, signed-in authors get an Edit (✎) button: scrub to freeze the scene at any %, nudge each line’s X / Y / scale / turn / fade with the ± steppers live, then Copy keys to paste the result back. Set the Recipe to Custom to keep hand-tuning.
How to set it up
Add it in under a minute
- Add the Text Scroll Choreography element (Animation Engine) where the sequence starts, then put your “chapter” sections right after it.
- Fast path: on the Text tab pick a Recipe (Stacked Rise, Alternating Sides, Center Focus, Diagonal Sweep), type your lines, and it poses + staggers them for you. Choose Custom to hand-author instead.
- On the Text tab, add each line — the words, tag, size, weight, colour — and pick an Anchor.
- Set Appear by / at %, Hold until %, Exit by / Gone by % — plus an optional tilt, 3D warp (rotateX / skew) and a Text Effect (reveal, typewriter, scramble, gradient, neon…).
- On the Scene tab set Scroll length (screens), the foreground z-index and smoothing. Turn on the guide to dial in the scroll %, then off before publishing.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.