Staggered Split-Text Animations in Webflow (GSAP)

You can make a heading reveal itself word by word, or letter by letter, entirely inside Webflow — no code — using the new GSAP-powered animation panel and its Stagger and Split Text options. This lesson is about staggered text animations: how to break a heading apart, time each piece, and make the whole reveal feel intentional instead of accidental.

The panel is powerful but honestly one of the trickiest things Webflow has shipped. Most people click through Stagger and Split Text hoping something nice falls out. The goal here is the opposite — to understand exactly what stagger, offset, split text, and stagger easing each do, so every delay is placed on purpose and nothing is left to guesswork.

Get the mental model and the settings stop being a lottery. You’ll be able to build reveals that are elegant, precisely timed, and easy to tweak when a client asks for “a little faster at the end.”

How it works

The panel model. Since Webflow’s GSAP-powered system, the interactions panel is built from a few nested pieces. A trigger (like page load) holds one or more actions. An action is just a group of property transformations — a way to move certain values from a start point to an end point — applied to one or more targets. Each animated property has a Type that decides how the values are calculated: To animates from whatever the element currently has in the designer toward a final value; From-To lets you set both ends explicitly; From sets only a starting value and animates back to the designer value. For a page-load reveal, From is the one you want — you define where letters start (invisible, pushed down) and they land on their real, designed state.

Stagger — the core idea. Stagger means the animation is applied to multiple targets one after another instead of all at once. The catch that trips everyone up: with a single target there is nothing to stagger, so turning it on changes nothing. It only comes alive once you have several targets — which is exactly why Split Text matters. There are two ways to time it. Offset time is a fixed delay between each element’s start: 0.5s means every piece begins half a second after the one before, so adding elements makes the sequence longer. Total time is a fixed budget for the whole stagger, divided evenly across the intervals — and the number of intervals is always the number of pieces minus one. So with 13 letters and a total time of 0.5s, each gap is roughly 0.5 ÷ 12 ≈ 0.04s, tight and smooth. Same idea, opposite direction: offset grows with the count, total time shrinks each gap as the count grows.

The From origin, and Split Text with masks. The stagger’s own From setting (start, center, end, edges, random, element) decides where the sequence begins — center animates the middle piece first then works outward, edges fires the outer pieces first and moves in, and so on. It changes the order only; the spacing logic between pieces stays identical. Split Text is what gives stagger something to chew on: it breaks one text element into words, lines, or characters, and each becomes a target. The mask option wraps every piece in its own clipping container, so it stays hidden until it moves into view — combined with an upward motion, each word or letter looks like it slides out from behind a hidden edge, far cleaner than a bare fade.

Two easings, two jobs. There are two ease settings and they are not the same thing even though they share a name. The ease in the action group shapes how each individual piece travels from its start value to its end value. The ease inside the stagger settings shapes the distribution of the delays between pieces. Leave it at none and the gaps are even. Choose a curve ending in in and the gaps start tight then spread — the reveal feels like it’s slowing down. Choose one ending in out and the gaps start wide then tighten — it feels like it’s speeding up. Exotic curves (back, bounce, elastic) produce deliberately chaotic, playful spacing; fun to try, rarely what you want for a clean heading.

How to use it

1. Switch to the GSAP system. If your interactions panel still shows the old interface, open the dropdown at the bottom that says classic interactions and choose interactions with GSAP. A lightning-bolt icon appears on the left for the new panel.

2. Add a page-load trigger. Use the trigger menu on the right, pick page load, and choose Custom to build freely. Rename the interaction something clear like home page load (a page name in parentheses keeps things tidy across a project).

3. Target the heading. Webflow adds a default class-based target, but an H1 usually has no class, so switch the target to a custom selector and type H1. With correct SEO there’s only one H1 per page, so all matching elements is fine.

4. Set the animation. Under the action, set a duration and (optionally) a start delay, and pick an ease you like — expo out reads nicely. Keep only the properties you need: opacity and move Y. Set the Type to From, uncheck the To box, then set opacity to start at 0% and Y to start at 100% so the text rises up as it fades in.

5. Enable Split Text. Turn on Split Text and choose word or letter (line behaves like word when each word is on its own line). Set mask to match the split type so each piece is clipped for a clean slide-out reveal.

6. Choose your stagger. Set Stagger to offset time for a fixed gap between pieces, or total time to fit the whole reveal inside one duration. Pick a From origin (start is the classic left-to-right; try center or edges for variety).

7. Shape the pacing (optional). Add a stagger ease to bias the delays — in to decelerate the reveal, out to accelerate it. Exaggerate the total time briefly while tuning so you can actually see what each curve does, then dial it back.

Everything here lives in native Webflow settings, so there’s nothing to paste — clone the project, open the page-load interaction, and change the values to feel how each one behaves.