How to Use GSAP ScrollTrigger in WordPress & Elementor

Have you ever wondered how some websites instantly grab attention with smooth, eye-catching scroll effects? That’s the magic of GSAP ScrollTrigger, a powerful animation extension that transforms ordinary websites into interactive experiences. When combined with WordPress and Elementor, ScrollTrigger lets you build professional, engaging animations without overwhelming complexity. 

For your website, if you want sections to fade in, images to slide, or text to move with scrolling, ScrollTrigger gives you full creative control. The best part? You don’t need to be a coding expert. In this guide, we’ll walk you through how to use GSAP ScrollTrigger in WordPress & Elementor step by step, so you can boost user engagement, improve your site’s storytelling, and create animations that keep visitors hooked. 

What is GSAP ScrollTrigger?

GSAP ScrollTrigger is a powerful plugin for the GreenSock Animation Platform (GSAP) that allows developers and designers to create scroll-based animations. Unlike traditional CSS animations, GSAP animation responds dynamically to the user’s scroll position. Also, it enables effects like pinning elements, animating properties in sync with scrolling, triggering animations at specific points, and creating seamless parallax or horizontal scroll experiences.

With ScrollTrigger, you can control start and end points, scrub animations in real time, and synchronize multiple elements using timelines. Its high performance ensures smooth animations without affecting website speed. GSAP ScrollTrigger brings your WordPress and Elementor websites to life, enhancing engagement and user experience.

What are the Ways to Add GSAP ScrollTrigger in WordPress and Elementor?

There are 3 different ways to add GSAP ScrollTrigger in WordPress and Elementor. These are – 

WordPress Plugin 

One of the easiest ways to use GSAP ScrollTrigger in WordPress is with the Animation Addons plugin. It’s built for Elementor and lets you add scroll-based animations without writing code.

With its built-in Animation Builder, you can design, preview, and apply effects visually. This method is perfect for beginners and designers who want professional animations quickly while keeping full compatibility with Elementor.

Add via Elementor (HTML / Custom Code)

For those who prefer more control, you can add GSAP ScrollTrigger in Elementor using the HTML widget. Simply insert the GSAP and ScrollTrigger scripts along with your custom JavaScript. Then, assign classes to the elements you want to animate. This approach is slightly technical but gives complete flexibility to design unique animations right inside Elementor.

Using GSAP Library via CDN

For full control and advanced scroll-based animations, the GSAP library with ScrollTrigger is another choice for users. By adding GSAP via CDN or enqueueing it in WordPress, you can write custom JavaScript to create highly interactive effects.

This approach gives developers flexibility for creating dynamic, engaging websites built with WordPress and Elementor.

Method 1: WordPress Plugin

There are countless WordPress plugins available for adding animations, each offering different features and complexity levels. For this tutorial, we’ll focus on Animation Addons, a powerful all-in-one GSAP-based plugin for Elementor to build different types of animated features for your website.

It comes with 200+ fully built websites, 2,000+ professionally designed page templates and 10,000+ modern, ready-to-use section templates. Moreover, you will get 100+ exclusive widgets and 25+ advanced Elementor extensions to create stunning animated websites.

You get a custom animation builder too, so you can make your own effects. You can make animated websites quickly and easily with all the tools and ready-made templates that are already out there.

Now, let’s look at an example of a step-by-step guide on how to use GSAP ScrollTrigger in WordPress.

Step 1: Install Animation Addons

First, you have to install Animation Addons for your WordPress website. For that, go to your dashboard first. Then Plugins>Add Plugin. Search Animation Addons, install and activate it.

Step 2: Enable ScrollTrigger Extension

After that, go to Animation Addons from your dashboard. Click on Extensions and from that you will see ScrollTrigger. Enable the extension. Now, you can use ScrollTrigger for your website. 

As there are many examples of ScrollTrigger, let’s see how horizontal scrolling works. 

Step 3: Insert Images

Here, we take 3 images to create horizontal scrolling. Just take a flex container layout and upload any 3 images you want to animate.

Step 4: Set the Content Width

First, click on the container shown in the image. Make the content width set to “Full Width” so that horizontal scrolling works smoothly. Set the width to 100, as there are no hard and fast rules, you can change to any value as your requirement. Choose the direction to “Row-horizontal,” which moves the container to the left. You can also change the direction as you want.

Step 5: Apply Horizontal Scroll

Go to the Advanced tab, where you’ll find the Horizontal Scroll option. Switch it to Yes to unlock the full set of settings. Next, adjust the Width according to the number of containers like 300 for three, 600 for six, and so on. Then, set the End value to control how far users must scroll before the animation stops.

For example, 3000 means the effect ends after 3000 pixels of scrolling. Finally, configure the Breakpoint to decide where the animation should apply like Mobile, Tablet, or Laptop, depending on your audience.

Step 6: Submit and Preview

Finally, click on the Publish and now you can enjoy the ScrollTrigger by using Horizontal scrolling. 

Now, there are many effects of ScrollTrigger like ScrollTo, Nested Scrollmotion, Stack Card and many more. Here, we will give some examples of ScrollTrigger – 

Nested Scrollmotion allows you to create scroll-based animations inside another scrolling container. It also provides more dynamic and interactive. It’s perfect for building complex layouts where inner elements animate smoothly as users scroll through sections.

Stack Cards create a visually engaging effect where cards overlap and slide into place as you scroll, almost like flipping through a deck. This effect works great for portfolios, product showcases, or storytelling-style pages.

Animation Builder

Another way you can implement ScrollTrigger is through the custom animation builder of Animation Addons. The Animation Builder in Animation Addons gives you a simple yet powerful way to design custom animations directly inside WordPress and Elementor. Y

ou can choose from preset effects for quick results or build fully personalized animations with complete timeline control. Here, we show you the steps of how to add ScrollTrigger through Animation Builder.

Step 1: Start with Build Animation

From the dashboard, go to Pages. Select the page you want to animate with Build Animation. It will show if you install and activate the Animation Addon beforehand.

Step 2: Choose type of Animation

Next, click on the “Add New Animation” button. 

After clicking, you’ll see two options: Preset Animation and Custom Animation. If you want a quick setup, Preset Animation is the fastest way to apply ready-made effects without touching any settings. But if you’d like complete flexibility to design animations in your own style, choose Custom Animation. For this tutorial, we’ll explore the Custom Animation option to give you full creative control.

Step 3: Create Timeline

First, we have to create a timeline for our animation and give a title name. Here, we named the timeline as “Timeline_1”. You can also add properties if you want. 

Step 4: Select Animation Methods

Select the element you’d like to animate, this could be an image, a heading, or a text block. For this example, let’s go with text animation.

Next, click on “Animation_1” to open the animation settings. Here, you’ll need to connect the timeline you created earlier. Since we created “Timeline_1”, simply add that to the property box.

Now, you’ll see different animation methods: To, From, and Set. Pick the one that best fits your animation style. In our case, we’ll use “From”.

Finally, head over to the element you want to animate and right-click on it. A box with the element’s class name will appear. Just copy that class name and paste it into the Class box and your animation is linked!

Step 5: Set Properties

Now, come to Add Properties. Here, the value of ease and overwrite is set to default. Then click on Add New. You can add effects as much as you can. Here, we take effects like Y, opacity and color and set the values to – 

• Y: 100
• Opacity: 0
• Color: #fa0000 (red)

Step 6: Enable ScrollTrigger

Now, comes the ScrollTrigger option. Enable the option. Add the timeline you have created earlier. Set the Trigger by placing the class of the element on the trigger box. Trigger  defines the element that triggers the animation in the website. For the Start option, choose the value Top Center. 

Step 7: Save and Preview

At last, hit on the Save button and click on Play to preview the animation.

This is the final outcome of the text we want to animate through ScrollTrigger.

Method 2: Add via Elementor (HTML / Custom Code)

Another simple method to add GSAP ScrollTrigger is adding via Elementor. There are two clean options: page-level (Elementor HTML widget) or site-wide (Elementor Pro → Custom Code). You can pick any one of them and follow the short steps below.

Step 1: Choose where to place scripts

Page-level : You can use an HTML widget on the page you’re editing (good for single-page effects).

Site-wide: Another way you can go to Elementor → Custom Code → Add New, paste scripts and set Location: Body End and Display Conditions (good for reusable site effects).

Step 2: Paste these scripts in the init script

Place both script tags, GSAP and ScrollTrigger, before your init script (HTML widget or Custom Code → Body End). Just copy the full code and paste in the init script.

					<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
  gsap.registerPlugin(ScrollTrigger);
  gsap.from('.fade-in', {
    opacity: 0,
    y: 40,
    duration: 1,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: '.fade-in',
      start: 'top 85%'
    }
  });
});
</script>

				

Step 3: Add target class in Elementor

Select any widget/section → Advanced → CSS Classes → enter:

					fade-in
				

You can use different class names for different effects. Through editor preview you can always Preview Changes or open the published page. Now, scroll through the website to test the animation.

Method 3: Using GSAP Library via CDN

You can follow the step by step process if you prefer to use the GSAP library. 

Step 1 : Create a custom JS file

In your theme (preferably a child theme), create a folder named js and add a file called gsap-custom.js, where you’ll write your animation code. Never edit a parent theme directly. If you edit the parent theme, you could overwrite the changes accidentally. 

					gsap-custom.js

				

Step 2 : Add enqueue code in child theme

Open your child theme’s functions.php and paste this code below. Here, you will enqueue the GSAP core file, ScrollTrigger plugin file and your custom JS file respectively. 

					function load_gsap_scrolltrigger() {
    // GSAP core
    wp_enqueue_script( 'gsap', 'https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js', array(), null, true );
    // ScrollTrigger plugin
    wp_enqueue_script( 'gsap-scrolltrigger', 'https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js', array('gsap'), null, true );
    // Your custom JS file
    wp_enqueue_script( 'gsap-custom', get_stylesheet_directory_uri() . '/js/gsap-custom.js', array('gsap','gsap-scrolltrigger'), null, true );
}
add_action( 'wp_enqueue_scripts', 'load_gsap_scrolltrigger' );

				

Step 3 : Add animation code in custom JS file

Now, we will use an animation effect when you scroll through the website. Here, we will use the fade-in effect when scrolling. 

					gsap.registerPlugin(ScrollTrigger);

gsap.from(".fade-in", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".fade-in",
    start: "top 80%"
  }
});

				

Step 4 : Add class in Elementor

In Elementor, select the widget/section → Advanced → CSS Classes → add:

					fade-in

				

Now, when you scroll, that section will fade in.

You can change the class name and animation settings for different effects.

Best Practices for Using GSAP ScrollTrigger in WordPress and Elementor

Using GSAP ScrollTrigger in WordPress can create stunning animation examples and effects, but following best practices ensures your animations run smoothly and don’t hurt performance. 

Proper Script Enqueuing

Always use a child theme or custom plugin when adding code, so your changes remain safe during theme updates. Keep your animation code organized by creating a dedicated JavaScript file instead of scattering snippets across different areas of your site.

Testing and Debugging

When designing animations, remember that less is more. Too many effects on one page can overwhelm visitors and slow down load times. Instead, focus on animating key sections—like hero banners, call-to-action areas, or product highlights—where motion adds value. Also, always test responsiveness across devices. Use ScrollTrigger’s built-in options like start, end, and markers to fine-tune animations for mobile, tablet, and desktop views.

Optimize Performance for Elementor Users

Elementor users can integrate ScrollTrigger with clean class names and keep CSS organized for easy maintenance. Finally, optimize performance by loading GSAP from a reliable CDN and avoiding unnecessary plugins that may conflict. 

Final Words

Incorporating GSAP ScrollTrigger into your WordPress and Elementor projects is one of the best ways to make your website feel dynamic and interactive. 

ScrollTrigger gives you the flexibility to bring your designs to life without overwhelming complexity. By following best practices and keeping animations purposeful, you’ll not only capture your visitors’ attention but also create a professional user experience that keeps them engaged and coming back.