GSAP Text Scroll Effects

Are you looking to add some dynamic flair to your Webflow site? Look no further! With GSAP (GreenSock Animation Platform), you can create stunning text scroll effects that will captivate your audience. Here are eight different text scroll effects powered by GSAP that you can integrate into your Webflow site:

​

1. Words Sliding Up: Make your text appear as if it's gracefully sliding up into view.
2. Individual Words Rotating In: Add a twist to your text with words rotating in one by one.
3. Words Sliding In from the Right: Create a smooth sliding effect from the right for your text.
4. Individual Letters Sliding Up: Animate each letter to slide up individually for a unique effect.
5. Individual Letters Sliding Down: Have each letter slide down into place for a dramatic entrance.
6. Individual Letters Fading In: Make your text appear letter by letter with a subtle fade-in effect.

​

To achieve these effects, you'll need to utilize GSAP, ScrollTrigger, and SplitType. Additionally, you'll need to add and modify custom JavaScript code on your Webflow pages. Here’s a quick guide to get you started:

​

Step-by-Step Guide

​

1. Include GSAP and ScrollTrigger: Add the GSAP and ScrollTrigger libraries to your Webflow project.
2. Split Your Text: Use SplitType to break your text into individual words or letters.
3. Add Custom JS Code: Insert and modify the custom JavaScript code to define your desired effects. You can adjust parameters like start offset, opacity, duration, and ease effect to fine-tune the animations.

​

Sample Code Snippet

​

gsap.registerPlugin(ScrollTrigger);

const splitText = new SplitType('.your-text-class', { types: 'words, chars' });

gsap.from(splitText.chars, {
  scrollTrigger: {
    trigger: '.your-text-class',
    start: 'top 80%',
    end: 'bottom 20%',
    scrub: true,
  },
  opacity: 0,
  y: 50,
  duration: 1,
  stagger: 0.05,
  ease: 'power2.out',
});

​

Customization Options

​

• Start Offset: Adjust when the animation starts.
• Opacity: Set the initial opacity of the text.
• Duration: Control how long the animation lasts.
• Ease Effect: Choose from various easing effects for smooth transitions.

​

Unlock the power of GSAP for various text effects today and elevate your Webflow projects to the next level! Happy animating!

​

---

​

Tags: GSAP, Text Effects, Scroll, Animation, JavaScript, Custom Code