See How Contractors Stay Booked Up
Watch a short walkthrough of how I get contractors found and called, then book a time with me if it fits.
If you have ever wanted to create a fade in text effect where every letter of the word fades in as you scroll through a section, then this tutorial is for you. Using GSAP and Split Type libraries, I will show you how to achieve this effect. It requires minimal setup and will elevate your projects. I provide all the code below.
Creating visually appealing effects on your website can significantly enhance user engagement and overall site aesthetics. In this detailed tutorial, I’ll show you how to implement a captivating fade-in text effect using GSAP’s ScrollTrigger and the Split Type library. This effect will make each letter of a word fade in as you scroll, adding a dynamic layer to your Webflow projects with minimal coding required.
Javascript Code
Let's dive into the code that makes this effect possible. We'll start by including the necessary libraries in our project.
Include GSAP and ScrollTrigger:
<!-- GSAP BASE CODE -->
<script defer
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<!-- GSAP SCROLL TRIGGER -->
<script defer
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>Include Split Type Library:
<!-- Minified UMD bundle -->
<script defer src="https://unpkg.com/split-type"></script>Activate the Effect:
<script defer>
window.Webflow ||= [];
window.Webflow.push(() => {
gsap.registerPlugin(ScrollTrigger); // initialize scroll trigger
// Split text into words and characters
const text = new SplitType('#split-type-text', { types: 'words, chars' })
// Animate characters into view with a stagger effect
gsap.to(text.chars, {
opacity: 1,
duration: 0.5,
stagger: { each: 0.05 }, // Stagger each character's animation by 0.05 seconds
scrollTrigger: {
trigger: '#split-type-text',
start: "top center",
end: "bottom center",
scrub:1
},
});
});
</script>CSS
<style>
/* It is crucial that you add .char since this class is added when split type splits the characters */
#split-type-text .char {
opacity: 0.25;
}
</style>To ensure the text effect is visible, we need to adjust the CSS to start with a lower opacity for each character.
Target the text in your project with this CSS declaration. You can place it in a custom code embed or in the head or body section of your projects page settings. Make sure to wrap it in tags
Conclusion
With the setup above, you can enhance your Webflow projects by adding an elegant scroll-triggered text animation. This effect not only adds a layer of interactivity but also boosts the visual appeal of your website.
Resources
For more information on GSAP and Split Type, check out the following documentation:
10 Marketing Mistakes Contractors Make
A free guide to the 10 ideas that sound reasonable but cost you jobs, and the 10 rules that keep your phone ringing and your calendar booked up.
Questions You Might Be Asking
You can load it from a CDN like jsDelivr or unpkg, which is the fastest way to get started. Self-hosting only makes sense when you need a pinned version for reliability or want to avoid third-party script requests. For most Webflow projects, the CDN approach is fine and keeps your markup cleaner.
Per-character animation can get expensive on long paragraphs because each letter becomes its own animated span. For headings and short pull quotes, the effect is smooth. For body copy, switch to splitting by word or line to cut the number of animated elements and keep scroll performance snappy.
Custom code like GSAP and SplitType only runs on the published site or the Webflow preview tab, not inside the Designer canvas. Save and publish to staging, then check the animation there. That limitation is the same for any third-party JS in Webflow.
Wrap the GSAP setup in a check for window.matchMedia('(prefers-reduced-motion: reduce)').matches. If true, skip the split and animation entirely and set the text to full opacity. That keeps the page accessible for users who opt out of motion without removing the effect for everyone else.
