How to Create a Stunning Fade-In Text Effect in Webflow Using GSAP Scroll Trigger

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

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 <style></style> tags

<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>

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:

• GSAP Documentation
• Split Type Library Documentation