How to Add GSAP Animation in WordPress?

Want to give your WordPress website a modern, interactive feel that keeps visitors hooked? Then it’s time to explore the power of GSAP animation in WordPress. One of the most well-known JavaScript libraries is the GreenSock Animation Platform (GSAP).

GSAP is a high-performance JavaScript library designed for creating animations to make your websites look professional, smooth, and lightweight. If you want to experience smooth, professional-grade animations for your websites, it is a high chance GSAP was behind them. 

In this GSAP animation WordPress tutorial, we’ll guide you on how to integrate GSAP into your website. From using a GSAP WordPress plugin to customizing a GSAP animation WordPress template, you’ll learn the easiest approaches step by step. And do you know what is the best part? You don’t always need a premium tool for your website.

There are many GSAP animation WordPress examples and effects that work just as well. By the end of the guide, you’ll be ready to transform a static site into a visually stunning one with GSAP animation WordPress free solution or premium templates which impress visitors and improve engagement.

Understanding GSAP

If you want to bring life to your WordPress site, using GSAP animation in WordPress is a game-changer. It is widely used by professionals to build smooth, performance-driven animations that stand out. Below, we’ll break down its key features, benefits, and popular use cases.

Benefits Over CSS and jQuery Animations

While CSS and jQuery offer basic animations, GSAP delivers unmatched flexibility and speed.

Performance: CSS animations often lack flexibility, and jQuery can slow down websites. Where else, GSAP animations run smoothly even with complex effects across all browsers.

Cross-browser support: Works consistently across modern browsers.

Scalability: Perfect for simple tweaks or large-scale effects on a GSAP animation WordPress template.

Popular Use Cases

Some of the popular use cases of Animation addons is narrated below – 

Scroll Animations and Page Transitions

One of GSAP’s most powerful features is scroll-triggered effects. You can animate text, images, or entire sections as users scroll down the page. Many modern animated websites use these effects to create smooth storytelling experiences and engaging GSAP WordPress themes.

Hero Sections and Landing Pages

First impressions matter. With GSAP, you can animate headlines, call-to-action buttons, or background images to grab attention instantly. Many businesses rely on GSAP animation in WordPress templates for marketing pages to improve conversions.

Interactive Elements and Hover Effects

GSAP makes it easy to animate buttons, menus, and icons with hover interactions. Compared to CSS or jQuery, GSAP delivers smoother results, making your site feel more polished and professional.

Sliders, Carousels, and Image Galleries

Developers often integrate GSAP to power custom sliders or galleries. Whether using GSAP animation CodePen examples or WordPress GitHub downloads, it allows advanced animations that feel fluid and modern.

Animated Charts, Numbers, and Infographics

For business websites, GSAP is excellent for animating statistics, progress bars, and infographics. This makes data more engaging and visually appealing to users.

Portfolio and Creative Websites

Designers and agencies often prefer GSAP because it helps showcase creativity with animated portfolios, case studies, and transitions. Using a GSAP WordPress plugin or Animation Addons, you can achieve professional effects without heavy coding.

In short, GSAP helps you move beyond static designs, making your WordPress site engaging and user-friendly.

Prerequisites Before Adding GSAP to WordPress

Before diving into adding GSAP animations to your WordPress site, it’s important to ensure you have the right tools, knowledge, and theme setup to achieve smooth, professional results.

Choosing the Right WordPress Theme or Builder

Before you start adding GSAP animation in WordPress, selecting the right theme or page builder is essential. Some themes are optimized for advanced animations, while others may cause conflicts or slow down performance. Builders like Elementor or Gutenberg work well with GSAP, and you can even experiment with a GSAP animation WordPress free setup to test compatibility before committing to premium options. The right foundation ensures your animations run seamlessly.

Basic Knowledge Requirements (HTML, CSS, JS)

While GSAP is beginner-friendly, having a basic understanding of HTML, CSS, and JavaScript will make the process easier. For instance, knowing how to target elements with CSS or structure them with HTML is crucial when implementing GSAP animation WordPress CodePen examples or GitHub downloads. Even if you rely on a GSAP WordPress plugin, a little coding knowledge allows you to customize animations beyond what templates offer. This foundation ensures you’re not limited to pre-built effects.

Tools/Plugins You May Need

To integrate GSAP smoothly, you’ll need a few supporting tools. At minimum, a good code editor (like VS Code) and access to your theme’s functions.php file are required. For non-developers, plugins such as Custom JS for WordPress or dedicated GSAP WordPress plugins make the process easier. 

If you’re looking for a beginner-friendly option, addons like Animation Addons can help you implement GSAP animations visually without diving too deep into code. While developers may prefer manual setups, plugins like this offer a simple way to experiment with GSAP animation in WordPress, especially when paired with page builders like Elementor.

Different Ways to Add GSAP in WordPress

Adding GSAP animation in WordPress can be done in several ways. Here’s a quick overview of the most common methods:

Method 1: Download GSAP file from GSAP website

One of the most reliable ways is by downloading GSAP from the GSAP website. This method allows you to enqueue the GSAP library properly, ensuring it works seamlessly with your GSAP WordPress theme or custom layouts.

Method 2: Add GSAP Animations in WordPress Using Animation Addons Plugin

If you’re using page builders like Elementor or Divi, GSAP can be added visually through custom HTML, JS widgets, or lightweight plugins such as Animation Addons. This approach is perfect for designers who want to experiment with GSAP animation WordPress templates or GSAP WordPress themes without writing extensive code.

Method 3: Using GSAP CDN Directly in WordPress

The easiest and quickest method is to include GSAP via a Content Delivery Network (CDN). By linking to the GSAP CDN in your header or footer, you can immediately start using animations for your websites. This approach doesn’t require installation of additional plugins. 

Method 1 : Download GSAP file from GSAP website

Visit the download page for GSAP files. Click on the Get GSAP and download the required files you need. 

Step 1: Open your child theme’s functions.php

Never edit a parent theme directly. Create a child theme so that updates won’t overwrite your changes. Now, go to WP Admin → Appearance → Theme File Editor → Child Theme → functions.php. Click on the functions.php.

Step 2: Add enqueue code

Place the code in your child theme’s functions.php. It enqueues GSAP from a CDN and registers a small custom script where you write your animations. After enqueuing the code, it loads GSAP in the footer for better performance. Also, it loads your /js/theme-gsap.js after GSAP so you can safely call gsap functions there.

					function mytheme_enqueue_gsap() {
    // Load GSAP library from CDN
    wp_enqueue_script(
        'gsap',
        'https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js',
        array(),
        '3',
        true
    );

    // Load custom animation JS
    wp_enqueue_script(
        'my-gsap-custom',
        get_stylesheet_directory_uri() . '/js/gsap-custom.js',
        array('gsap'),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_gsap');

				

Step 3: Create your custom JS file

Create a js folder in your child theme and add gsap-custom.js. Keep the file minimal. Here’s a tiny, required example that runs after DOM loads. This is the only JS you need here to call GSAP.

					document.addEventListener('DOMContentLoaded', function () {
  gsap.from('.hero-title', {
    y: 30,
    opacity: 0,
    duration: 0.9,
    ease: 'power2.out'
  });
});

				

Now, check your website. The elements with class .hero-title will animate in your website.

Method 2: Add GSAP Animations in WordPress Using Animation Addons Plugin

If you want to add beautiful animations without touching code, Animation Addons is the easiest solution. It uses GSAP under the hood and works seamlessly with WordPress. Here, we will show you 2 examples of GSAP animations, ScrollTrigger and Pin Elements/ Sticky Elements. First, we will show the example of GSAP ScrollTrigger animation.

Step 1: Install and Activate Animation Addons

First of all, go to WP Admin dashboard → Plugins → Add Plugin. Now search for “Animation Addons” in the search bar. Install the plugin and activate it.

The plugin automatically loads GSAP, so you don’t need to manually add any scripts.

Step 2: Enable the Widgets from Animation Addons

You have to enable the widgets and extensions before using different features of Animation Addons. From the left panel, go to Animation Addons → Extensions. Now, enable which extensions you want to enable. You can also click on Enable All to get access to all the extensions. Here, we enable Horizontal and Sticky Elements to show the animation. 

Step 3: Open the Page in Elementor and Insert Images

From the Page section, select the page you want to animate and click on Edit with Elementor. 

Step 4: Insert Images

Then, click on the ‘+’ icon. You will find two layout options, Flexbox and Grid. Choose the Flexbox option. Now from the search option in the left panel, click on ‘Image’ and drag it to the container that you have selected. 

Now, you will add four images according to your preference. 

Step 5: Apply the Horizontal Scroll 

Set the content width to Full Width to ensure the horizontal animation scrolls smoothly. Then, adjust the width value (e.g., 100) based on your layout. Finally, choose your preferred direction, for instance, Row-horizontal moves the container to the left.

Go to the Advanced tab and enable the Horizontal Scroll option. Set the Width based on your container count (e.g., 400 for four containers). Adjust the End value to control when the scroll animation stops, for instance, 2000 ends after 2000 pixels of scrolling. In my case, I used 4000, but you can modify it based on your layout needs.

Step 6: Preview and Publish

Click the Preview icon to see the animation in action. Once satisfied, click Update to save changes.

Now, let’s see the example of sticky elements.

First, follow the steps 1, 2 and 3 just like the example of ScrollTrigger. 

Step 4: Enable Sticky Elements

Select the element you want to make sticky and enable the wrapper by clicking on its container. Go to the Advanced tab, find Sticky Elements, and toggle it to Yes. After that, adjust settings like Pin Type, Scrub, and Spacing to control how the element stays pinned. Below we mentioned what are the features of Sticky elements and which option we choose – 

Pin Wrapper: Controls how the element’s container behaves while the sticky animation is active. Here, Default is selected.
Pin: Keeps the selected element fixed in place during scrolling. True is selected for the pin.
Pin Spacing: Adds space after the pinned element to maintain smooth scroll flow. We keep it False for pin spacing.
Pin Type: Defines how the element sticks, for example, start, center, or end during scroll. Between fixed and transform, we select transform here.
Pin Scrub: Syncs the animation progress with scroll speed for smoother transitions. False is chosen here, but you can pick what works best for you
Pin Markers: Displays visual indicators to help you debug and fine-tune the sticky animation. Here, false is chosen.

Step 5: Set the Pin Trigger Points

Set where the pinning starts and ends by aligning your element with the viewport. For instance, “Top Top” pins when the element’s top reaches the viewport’s top. Similarly, “Bottom Top” ends the pin when the element’s bottom hits the top of the viewport.

Step 6: Preview and Publish

Click the Preview icon to see the animation in action. Once satisfied, click Update to save changes.

Method 3: Using GSAP CDN Directly in WordPress

The easiest way to add GSAP animation in WordPress is by using the CDN link. A CDN (Content Delivery Network) lets you load GSAP directly from the web without downloading files. Let’s see how to do it:

Step 1: Open Your Theme’s header.php File

• In your WordPress Dashboard, go to Appearance → Theme File Editor.
• On the right-hand side, select template-parts →headers →header.php
• This file controls what loads inside the <head> section of your site.

Step 2: Paste the GSAP CDN Link

Inside the <head> section of header.php, just before the closing </head> tag, paste this line:

					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

				

Step 3: Add Your Custom Script

Still in the header.php file (or better, in footer.php so it loads last), add your animation code inside <script> tags. Example:

					<script>
document.addEventListener('DOMContentLoaded', function() {
  gsap.to('.gsap-box', { y: -30, opacity: 1, duration: 1 });
});
</script>

				

Step 4: Add an Element to Animate

Edit your page or post and add a div with the class gsap-box. When you refresh the page, the text will animate.

					<div class="gsap-box">Hello GSAP!</div>

				

Best Practices for Using GSAP in WordPress

It’s important to follow best practices when adding GSAP animation to your WordPress site. This will make it look more updated and engaging. This keeps your animations smooth, lightweight, and free of issues that don’t affect overall performance. These effective tips are easy to remember and will help you while using GSAP in WordPress.

Keep Animations Purposeful

Makes purposeful animations which makes user experience better, not worse. Use GSAP to draw attention to important parts of your site, like sliders, call-to-action buttons, or special content. You can get ideas from GSAP animation CodePen examples and try out small effects on them before adding them to your site.

Use Lightweight Implementations

Always load GSAP using quick and easy means. If you’re a developer, you should use functions.php to enqueue. Again, a GSAP WordPress plugin is good to use if you’re just starting out. Do not add duplicate scripts or large libraries.

Optimize for Performance

If you don’t improve performance, animations can make a site load more slowly. Do not add too many effects at once, keep your code clean, and only use the effects you need. If you’re using a GSAP WordPress theme or template, make sure you test how it works on desktop and mobile phones.

Test Across Devices and Browsers

Every user will look at your site in different ways. To make sure your GSAP animation works well, you should always test it in WordPress on multiple browsers and screen sizes.

Use Reusable Templates or Downloads

If you don’t have much time, check out the GSAP animation WordPress GitHub resources or the free GSAP animation WordPress download packs. These can help you save time and still make excellent animations.

Troubleshooting Common Issues (GSAP in WordPress)

Sometimes, even easy GSAP setups don’t work right. What are the most common issues you will face when adding GSAP animation in WordPress? Why do they happen? And how to fix them quickly? They are explained in simple terms so you can get them fixed right away.

GSAP isn’t loading

Symptom: gsap is undefined in the console.
Why: A CDN or local file is not loading, wrong URL, or an ad or blocked by ad/script blocker. 

Fix: Check the page source or the Network tab to see if gsap.min.js is there. If the CDN is missing, add it again or enqueue it in functions.php. Change the CDN URL or turn off blockers temporarily.

Script loads but animations don’t run

Symptom: No console errors, but elements don’t animate.
Why: Wrong selector, code running before DOM, or CSS keeps elements hidden.
Fix: Use document.querySelectorAll in the console to make sure your selector fits the element. Wrap code in DOMContentLoaded or place script in footer. Check CSS (e.g., display: none), then GSAP can’t animate hidden elements.

Problems with order or dependencies

Symptom: theme-gsap.js runs before GSAP.
Why: Scripts were queued up without their dependencies or in the wrong order.
Fix: Use wp_enqueue_script(‘theme-gsap’, …, array(‘gsap’), …); this will make WP load GSAP first.

Problems with plugins or themes

Symptom: When you add GSAP, you might get console problems or a broken layout.
Why: Another plugin or theme JS conflicts (duplicate libraries, $ conflicts).
Fix: Turn off other plugins one by one and use the default theme to find the source of the problem. If you’re using page builders, check out their integration options.

Caching / CDN caching old files

Symptom: After editing, changes are not visible.
Fix: Clear your browser’s cache, your CDN’s cache, and any WP caching tools. Hard-refresh (Ctrl+F5) or update your script (theme-gsap.js?ver=1.1).

Performance issues on mobile

Symptom: Janky animations on phones.
Why: Animating layout-heavy properties or too many elements.
Fix: You can animate transform and opacity, slow down animations, lower simultaneous tweens, or turn off heavy animations on small screens.

Z-index / layering and visual glitches

Symptom: Animated elemented shows up behind other content.
Fix: Look at the stacked context, add will-change: transform, and change the z-index as needed.

If you still can’t fix it, copy the console errors and a short code snippet and paste them into a support thread or contact your developer. Small details like wrong path, missing dependency, or a CSS rule are almost always the cause.

Conclusion

One of the best ways to make your website stand out with smooth, professional, and engaging visuals is to add GSAP animation to WordPress. There are many ways to add GSAP, such as through functions.php, a GSAP WordPress plugin, or directly through a GSAP CDN. This makes it easy for both beginners and experts to use. It’s even easier to learn and try new things with free resources like GSAP animation CodePen and GitHub repositories.

If you follow the steps in this guide and use best practices, you can make your content come to life without slowing down your site. Start small and test your effects. Then, add animations that really grab your audience’s attention to your pages over time.

FAQs

Is it free to use GSAP animation in WordPress?

Yes, you can use GSAP for free on most personal and business projects. With a GSAP animation WordPress free setup and a CDN or plugin, it’s easy to add it to your site.

What is the easiest way to add GSAP animations in WordPress?

The Animation Addons plugin is the easiest way to get started. It adds GSAP right to your page builder so you can add animations visually without having to write code.

Do I need to know coding to use GSAP in WordPress?

Not all the time. You can add unique effects with basic HTML, CSS, and JS, but you don’t have to know how to code to use GSAP WordPress plugins, templates, or themes that already have animations built in.

Where can I see some other GSAP animations?

You can explore GSAP animation CodePen demos or GSAP animation WordPress GitHub repositories. You can copy, test, and use these examples on your WordPress site right away.

Will GSAP animations slow down my WordPress website?

Not if it’s used right. GSAP is lightweight and performance-optimized. To keep problems from happening, only animate the parts that you need to, follow best practices, and test on multiple devices.