How to Highlight Text on Scroll with Elementor and GSAP

Interactive animations can bring your website to life, capturing attention and delivering a memorable experience for your visitors. In this guide, we’ll walk you through creating a stunning text highlight animation that activates on scroll. Using GSAP, ScrollTrigger, and Elementor, you can easily implement this effect without needing advanced coding skills.

Table of Contents

how to highlight text on scroll with Elementor and GSAP, and ScrollTrigger. Create eye-catching animations without coding for an interactive user experience. Interactive animations can bring your website to life, capturing attention and delivering a memorable experience for your visitors. In this guide, we’ll walk you through creating a stunning text highlight animation that activates on scroll. Using GSAP, ScrollTrigger, and Elementor, you can easily implement this effect without needing advanced coding skills.

Step 1: Add a CSS Class to Your Text Widget

First, decide where you want the highlight animation to appear. Open Elementor and select the text widget you want to animate.

  1. Navigate to the Advanced tab in the Elementor panel.
  2. Under the CSS Classes field, type cool-split.

This class will serve as the identifier for the GSAP animation script to target your text.

Step 2: Target the Correct HTML Tag

The animation script provided in this tutorial uses h2 as the default tag for the text inside .cool-split. However, your design may use a different HTML tag like h1, h3, or even a paragraph (p).

To update the tag:

Look for this line in the JavaScript code : If you want to change the h2 tag to another tag, simply locate the GSAP code where the animation is applied. Look for the line that mentions .cool-split h2.

For example:

  • If you want to apply the animation to an h3 tag instead, change .cool-split h2 to .cool-split h3.
  • If your text is wrapped in a paragraph tag, update it to .cool-split p.

This ensures the animation targets the correct HTML element based on your design.

Step 3: Update the Scroll Trigger Section

If you want to update the section where the animation starts, look for the part of the GSAP code that specifies the scrollTrigger settings.

By default, it uses .about as the trigger. To change this:

  • Replace .about with the class name of your desired section.
  • For example, if you want the animation to start in the .services section, update .about to .services.

This ensures the animation activates when the user scrolls through the correct section of your page.

Step 4: Add the CSS and JavaScript Code to Your Website

Now that your text and trigger settings are ready, it’s time to add the CSS and JavaScript code to your website.

Adding CSS:

  1. Copy the CSS code.
  2. Go to your WordPress Dashboard and navigate to Appearance > Customize > Additional CSS or use Elementor’s Custom CSS feature.
  3. Paste the code and save the changes.

Adding JavaScript:

  1. Copy the JavaScript code.
  2. Use a plugin like Insert Headers and Footers to add the script to your website’s <head> or <footer>.
  3. Save and refresh your website to test the animation.

What’s Next?

Once you’ve implemented the steps above, your text will animate beautifully as users scroll through the page. To further customize the effect, you can experiment with:

  • Colors: Update the text color during the animation by modifying the color property in the JavaScript.
  • Timing: Adjust the duration or stagger values to control the speed of the animation.
  • Trigger Area: Fine-tune when the animation starts or ends using the start and end properties in the ScrollTrigger.

Adding interactive animations like this not only improves your site’s visual appeal but also keeps visitors engaged. Try it out today, and let your website shine!

Css Code

Copy Code 


.cool-split h2 {
width: 100%;
color: rgba(255, 255, 255, 0.125);
transition: color 0.3s;
}

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

const split = new SplitType(".cool-split h2", {
  types: "words, chars",
});

const tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".about",
      start: "top 10%",
      end: "+=125%",
      scrub: 0.5,
    },
  })
  .set(
    split.chars,
    {
      duration: 0.3,
      color: "white",
      stagger: 0.1,
    },
    0.1
  );
</script>
GSAP Text Highlight Animation Effect in Elementor - WordPress 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

How to Highlight Text on Scroll Twice with Elementor & GSAP – Smooth Scroll Animation Tutorial

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

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