How to Highlight Text on Scroll Twice in One Page with Elementor and GSAP

Creating engaging and interactive animations can significantly enhance the user experience on your website. In this tutorial, you’ll learn how to apply a text highlight effect on scroll twice within a single page using GSAP and Elementor.

Table of Contents

Creating engaging and interactive animations can significantly enhance the user experience on your website. In this tutorial, you’ll learn how to apply a text highlight effect on scroll twice within a single page using GSAP and Elementor.

Why Use GSAP for Scroll Animations?

GSAP (GreenSock Animation Platform) is a powerful JavaScript library designed for smooth and efficient animations. When combined with the ScrollTrigger plugin, GSAP allows you to create stunning scroll-based animations that work seamlessly with Elementor.

Adding the Effect Twice on One Page

If you want to apply this animation effect twice on the same page, I recommend watching my full video tutorial first, as it covers the essential setup and implementation steps.

If you have already watched the video, let’s get started. You need to follow the same steps twice to apply the effect in different sections.

Step 1: Create the First Animation Section

  1. Add a text element in Elementor and assign it the class: cool-split.
  2. Create a trigger element and give it the class: about.
  3. Your first section is now ready for animation.

Step 2: Create the Second Animation Section

  1. Design the second section according to your preference.
  2. Assign the text element in this section the class: cool-split-two.
  3. Create a trigger element for the second animation and give it the class: services.
  4. Your second section is now set up!

Step 3: Add the JavaScript Code

Now, add the following JavaScript code to your page to enable the animations:

Understanding the Code

  1. Libraries Used:
    • GSAP for animations.
    • ScrollTrigger to trigger animations based on scroll position.
    • SplitType to split text into individual characters for detailed control.
  2. How It Works:
    • The first animation targets .cool-split h2 within the .about section.
    • The second animation targets .cool-split-two h2 within the .services section.
    • Each animation is triggered when its respective section scrolls into view.
    • The text color changes smoothly from transparent to white.

Final Thoughts

This technique allows you to highlight multiple text elements on scroll, creating a dynamic and engaging experience for visitors. By following these steps, you can apply the effect twice on the same page using Elementor and GSAP.

Feel free to experiment with different colors, speeds, and stagger effects to match your design preferences. Happy coding!

CSS code

Copy Code 


/* Initial text styles */
.cool-split h2, .cool-split-two h2 {
  width: 100%;
  color: rgba(255, 255, 255, 0.125);
  transition: color 0.3s ease-in-out;
}

JavaScript Code

Copy Code 


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  // First animation for the "about" section
  const split1 = new SplitType(".cool-split h2", { types: "words, chars" });

  gsap.timeline({
    scrollTrigger: {
      trigger: ".about",
      start: "top 10%",
      end: "+=125%",
      scrub: 0.5,
    },
  }).set(
    split1.chars,
    {
      duration: 0.3,
      color: "white",
      stagger: 0.1,
    },
    0.1
  );

  // Second animation for the "services" section
  const split2 = new SplitType(".cool-split-two h2", { types: "words, chars" });

  gsap.timeline({
    scrollTrigger: {
      trigger: ".services",
      start: "top 10%",
      end: "+=125%",
      scrub: 0.5,
    },
  }).set(
    split2.chars,
    {
      duration: 0.3,
      color: "white",
      stagger: 0.1,
    },
    0.1
  );
</script>
How to Highlight Text on Scroll Twice with Elementor & GSAP – Smooth Scroll Animation Tutorial
Copy the code

Related Tutorials

How to Create an Animated Menu in Elementor Without Extra Plugins

GSAP ScrollTrigger animation effect in Elementor for smooth scrolling

MIND-BLOWING Elementor Scrolling Effects You Need To Know

Create a stunning 3D image slider in Elementor without Elementor Pro – Step-by-step tutorial.

How to Create a 3D Image Slider in Elementor (No Pro Needed!)

Blurry text animation effect tutorial for Elementor – Smooth scrolling reveal effect.

How to Create a Blurry Text Animation Effect in Elementor (No Pro Required!)

Animated hero section tutorial using Elementor in WordPress.

How to Make an Animated Hero Section With Elementor

GSAP Text Highlight Animation Effect in Elementor - WordPress Tutorial

How to Highlight Text on Scroll with Elementor and GSAP