GSAP
SplitText
Words
Characters
Letters
Text Reveal
Scrolltrigger
Smooth
Scrolling
Typography
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<h1 data-hightlight-text>Add your heading here</h1>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
gsap.registerPlugin(ScrollTrigger, SplitText)
function initHighlightText(){
let splitHeadingTargets = document.querySelectorAll("[data-highlight-text]")
splitHeadingTargets.forEach((heading) => {
// Define your default ScrollTrigger start point
const scrollStart = heading.getAttribute("data-highlight-scroll-start") || "top 90%"
// Default ScrollTrigger end point
const scrollEnd = heading.getAttribute("data-highlight-scroll-end") || "center 40%"
// Opacity of each letter before they start animating
const fadedValue = heading.getAttribute("data-highlight-fade") || 0.2
// Lower value here means a smoother reveal, feel free to test!
const staggerValue = heading.getAttribute("data-highlight-stagger") || 0.1
new SplitText(heading, {
type: "words, chars",
autoSplit: true,
onSplit(self) {
// use a context to collect up all the animations
let ctx = gsap.context(() => {
let tl = gsap.timeline({
scrollTrigger: {
scrub: true,
trigger: heading,
start: scrollStart,
end: scrollEnd,
}
})
tl.from(self.chars,{
autoAlpha: fadedValue,
stagger: staggerValue,
ease: "linear"
})
});
return ctx; // return our animations so GSAP can clean them up when onSplit fires
}
});
})
}
document.addEventListener("DOMContentLoaded", () =>{
initHighlightText()
})Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
Implementation
We've seen many different ways of implementing this type of scroll effect, our implementation might be the simplest one yet. No pseudo elements, duplicated text or masks that you have to animate. We simply split the text into characters, and then tween each letter from a lower opacity to fully visible. With the new GSAP SplitText version, making this responsive and accessible is easier than ever:
1. Getting started
Simply add the [data-highlight-text] attribute to a text element you want to target. Include the JavaScript in your project, and done!
2. Customization options
We included a couple of attributes you can add to the same heading element as in step 1. These allow you to customize the behaviour of the animation. You can change it either in the JS directly, or, add the following attributes to your heading:
data-highlight-scroll-start
Controls when the text starts highlighting. The default is top 90%. Learn more about the options in the ScrollTrigger docs.
data-highlight-scroll-end
Controls when the text animation finishes. Default is center 40%.
data-highlight-fade
Controls the opacity of the text when it is not 'highlighted' yet. Our default is 0.2.
data-highlight-stagger
Controls the stagger duration between each letter. A stagger duration of 1 would mean the letters are highlighted one after one, with no fade. A lower number makes it smoother. Play around with this to get your desired result! Our default is 0.1.
Search
K
Resource Details
Last updated
May 26, 2025
Type
The Vault
Category
Scroll Animations
Need help?
Join Slack
Original source
Ilja van EckCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.