Split text reveal is one of those small animations that immediately makes a site feel more premium.
Each word (or letter) fades up one by one, instead of the whole headline popping in at once. You see this a lot in high end landing pages, hero sections, and case study pages. Before this, you had to either fake it in Webflow with a lot of wrappers, or you had to write GSAP code by hand, manage delays, handle masks, and test again and again.
That pain just got removed.
With the new GSAP powered Interactions UI inside Webflow, you can build true GSAP animations without writing JavaScript, including SplitText, ScrollTrigger style scroll based reveals, staggers, and timeline level control. All of this runs with GSAP under the hood, and it is now available to all Webflow sites at no extra cost.
In this article we will set up three versions of split text animation
- Split text on page load
- Split text on scroll reveal
- Split text on section enter, with reset
For each version we will walk through it step by step, using Webflow’s GSAP UI.
There is also a full video tutorial that shows this start to finish, using real elements in the Webflow Designer. You can watch it here.
Before we start, a quick note on how this works in Webflow now.
What changed with GSAP inside Webflow
Webflow now ships with a new animation system called Interactions with GSAP. You can switch to it inside the Interactions panel. This new mode gives you a horizontal timeline, visual easing, scroll based triggers, SplitText, stagger controls, and the ability to reuse animations across your project. You do not have to paste custom GSAP code yourself.
The timeline view is important. Instead of stacking actions in a long vertical list like old Interactions 2.0, you can now see when each piece of the animation starts, ends, and overlaps, just like you would in After Effects. This makes it easier to sequence headline, then subheadline, then button, with precise delay between them.
Also, SplitText is built in. SplitText is a GSAP utility that breaks your text into lines, words, or individual letters. Each one can then be animated on its own with a stagger. The plugin can also create a mask wrapper for reveal effects, and it is designed to respect screen readers so the text is still accessible.
So instead of manually wrapping every word in a span, you just tell Webflow: split this heading by word, mask it, animate each word from 50px down to 0px, and stagger them.
Now let’s walk through the builds.
Part 1. Split text on page load
The Goal
Headline in the hero animates in as soon as the page loads. Each word fades in and slides up in sequence.
Step 1. Select your text element
In the Designer, select the heading or text block in your hero. This is the element that will reveal word by word.
Step 2. Open Interactions and switch to GSAP mode
Go to the Interactions panel. Make sure you are using the new GSAP interactions mode, not Classic Interactions. The GSAP powered mode is where you get SplitText, staggers, scroll triggers and the new timeline.
Step 3. Set the trigger to Page Load
Add a new animation and choose Page Load as the trigger. Page load means the animation will run when the page finishes loading.
Inside the trigger settings you will see basic playback controls. You can keep the defaults for now. You can always adjust delay, playback speed, and other timing later.
Step 4. Add a Custom Action
In the Actions area, choose Custom Action.
Target the element you want to animate. You can choose by class, by ID, or by attribute. Using a class is usually better for reuse, because you can point the same animation at other headings on other pages without rebuilding it.
Step 5. Set your first frame values
You are telling Webflow where each word starts.
For this effect we want each word to start invisible and lower on the Y axis. So in the From frame:
- Opacity: 0
- Y position: 50px down
Then set the To frame:
- Opacity: 100
- Y position: 0px
This gives you the classic fade up reveal.
Step 6. Control timing
Keep the duration around 0.5 seconds per word for a snappy hero reveal. You can tweak this. Longer duration will feel softer and more calm. Shorter duration will feel sharp and fast.
Step 7. Add stagger
Stagger means each word animates one after the other instead of all at once. Set total stagger time to something like 0.8 seconds. That means the full sentence finishes revealing in under a second, which feels good for hero copy.
Step 8. Enable Split Text
Now comes the key part.
In the same action block, enable Split Text.
Choose how to split. You can split by line, by word, or by letter.
For hero headers, splitting by word usually reads cleaner. Splitting by letter gives a more high energy, tech style reveal. Word by word feels more like editorial rhythm.
Step 9. Turn on Mask
There is an option to mask the words. When you enable Mask, Webflow wraps each word in its own clipping wrapper, similar to setting overflow hidden on a div. This creates a smooth upward reveal, without text showing outside its line box.
Step 10. Preview
You can now preview the timeline right inside the panel. You should see each word rise 50px to 0px while fading to full opacity, in order, following the stagger you set.
That is your page load split text animation.
Tip
You can rename this animation to something clear like:
Page Load Hero Heading Split
Naming matters when you reuse animations across the project. The new GSAP workflow lets you reuse existing animations instead of rebuilding them from scratch every time, which improves consistency across pages.
Part 2. Split text on scroll
Goal
Text reveals word by word when the user scrolls to a section, instead of only at page load.
This is useful for long case study pages, feature sections, or any content block that enters the viewport later.
Step 1. Select the section text you want to animate
Pick the heading or block of text inside the section you want to reveal on scroll.
Step 2. Create a new GSAP interaction
Same workflow. Go to Interactions, still in GSAP mode.
Step 3. Set the trigger to Scroll
Choose Scroll as the trigger type.
Scroll gives you start and end markers, which define when the animation begins and when it completes relative to the viewport. This works very similar to GSAP ScrollTrigger, which lets you sync animation to scroll position.
By default, Webflow will give you start and end positions. You will also see a visual timeline that maps to scroll progress.
Step 4. Tune the scroll start and end
You can adjust when the reveal should begin.
For example
Start the animation when the element bottom reaches around 80 percent of the viewport height.
End the animation when the element reaches center.
This makes the text finish animating just as it becomes fully readable, which feels natural. The UI lets you drag these handles, or choose presets like bottom, center, top.
Step 5. Add the Custom Action
Same as before. Add a Custom Action to this scroll timeline.
Set From frame
- Opacity: 0
- Y position: 50px down
Set To frame
- Opacity: 100
- Y position: 0px
Step 6. Add stagger, duration, and split text
Give it a slightly longer duration this time, for example 1 second, and set stagger to 1 second total. Split by word. Mask on.
Now, each word will animate up and fade in while you scroll into the section, instead of all at page load.
Step 7. Optional highlight effect
You can also animate color as part of the same timeline.
Example
From frame: text color dark gray
To frame: text color white
This gives you a highlight sweep feeling during scroll, almost like the sentence is being revealed with a marker. This is easy to do now because the GSAP UI lets you animate multiple properties in the same timeline and scrub it visually.
Step 8. Preview the scroll
Scroll the canvas. You will see the words reveal in sequence, following your scroll start and end markers. You can scrub and tune without publishing, which is one of the biggest upgrades of this GSAP integration.
Part 3. Split text on section enter with reset on leave
Goal
Text animates in when the section enters the viewport, and then resets when you scroll away. This means every time you scroll back to that section, the animation plays again from the top.
Step 1. Select the heading for that section
Choose the text you want to animate.
Step 2. New GSAP interaction
Create another Custom Action in the Interactions panel.
Step 3. Use a trigger that fires on enter
Instead of Scroll (scrubbed) you can use a trigger that fires when the element enters the viewport. This is more like a classic “reveal on scroll into view” animation.
Step 4. Set the animation frames
Same base values as before
From frame
- Opacity: 0
- Y position: 50px
- To frame
- Opacity: 100
- Y position: 0px
- Duration around 1 second
- Stagger around 1 second
- Split text by word
- Mask on
Step 5. Add reset on leave
In the trigger settings, set it to play when entering, and reset when leaving. This means when the element scrolls out of view, it rewinds. When you scroll back up and re-enter, it will animate fresh from the start.
This is very useful for repeating sections, sliders, feature rows, pricing cards, and any part of the site where a repeated reveal keeps the page feeling alive instead of static.
Best practices
Keep it readable
Stagger is nice, but do not spread it too far. If the sentence takes too long to build, people will start reading before the full line is visible. That hurts clarity.
Use masks for hero copy
Masked split text looks much more professional than raw text popping up from below the line box, because the mask hides overflow during the upward motion instead of letting letters slide through nearby elements. SplitText has built in masking support, so let it do that work for you.
Control your scroll timing
When you build scroll based versions, tune the start and end markers. Starting too late will cause the animation to fire when the user has already scrolled past the headline. Starting too early can feel jumpy. The new GSAP UI in Webflow gives direct visual handles for start and end, so use them.
Reuse animations across pages
Name your animations clearly so you can reuse them. The GSAP powered system in Webflow is designed so you can apply one animation setup to multiple elements or sections across the site without rebuilding the timeline every time, which keeps the site consistent and saves you production time.
Respect performance
You do not need to animate every single line of text on the site. Use it for hierarchy. Hero headline, key section titles, maybe one CTA block. Subtle and intentional motion usually increases clarity and trust, while over-animated pages start to feel like a toy. This matches the thinking behind the new Webflow GSAP approach, which aims to make high quality motion part of professional site design, not a gimmick.
Accessibility matters
SplitText from GSAP is designed to keep text accessible to assistive tech by managing how the DOM is split and letting you revert it. You are not hacking the HTML yourself anymore.
Final notes
The new GSAP UI inside Webflow is a real upgrade for motion work. You get a proper timeline, SplitText with mask, stagger control, scroll triggers, and reusable animations, all without dropping in custom JS. It removes a lot of pain that used to slow down production and lets you build the kind of text reveals you see in high end sites with no manual code setup.
To see all of this in action, step by step inside the Webflow Designer, watch the full tutorial here:
Next topic to explore is chaining timelines so your hero title, subheadline, and button animate in sequence on the same horizontal timeline. That is where this becomes more than a trick and starts to feel like design direction.