Embedding Animations with GSAP in WordPress: Complete Guide

8 February 2025

Estimated reading time: 5 min

Animation plays a vital role in the modern web user experience. A dynamic and fluid page captures attention and engages visitors more. If you are using WordPress and want to add powerful animations, GSAP (GreenSock Animation Platform) is the ideal tool. It allows you to create complex animations while ensuring optimal performance.

In this article, we will explore how to integrate GSAP into WordPress, including installation, animations basics, and real-world examples to improve the interactivity of your site.

Why use GSAP in WordPress?

GSAP is an ultra-powerful JavaScript library that allows you to animate HTML, CSS, SVG and even WebGL elements. Compared to other solutions like CSS animations or jQuery.animate(), GSAP offers:

✅ Exceptional performance: It is optimized for browsers and guarantees smooth effects, even on mobile.
✅ Maximum compatibility: Works perfectly on all recent browsers.
✅ Advanced control: Allows you to create complex sequences, manage timelines and conditional effects.
✅ Easy integration with WordPress: Compatible with Elementor, Divi, Gutenberg and other page builders.

Add GSAP to your WordPress site

There are several ways to add GSAP to WordPress: via a CDN, via a plugin, or by manually including it in your theme.

🔹 Method 1: Using a CDN (Easy and Fast)

The easiest way to add GSAP is to use a CDN and insert the script in your functions.php file:

function add_gsap() {
wp_enqueue_script(‘gsap’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js’, array(), null, true);
wp_enqueue_script(‘gsap-scrolltrigger’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js’, array(‘gsap’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘add_gsap’);

👉 Why?

wp_enqueue_script() loads GSAP in a secure and optimized way.
true at the end allows the script to be loaded in the footer for better performance.

🔹 Method 2: Add GSAP via a Plugin

If you don’t want to touch the code, you can use a plugin like WPCode Snippets or Custom Scripts to add GSAP in the header or footer.

🔹 Method 3: Include GSAP locally

If you prefer full control, you can download GSAP from the official website and add it to your theme folder (/wp-content/themes/your-theme/js/), then call it via:

function add_gsap_local() {
wp_enqueue_script(‘gsap-local’, get_template_directory_uri() . ‘/js/gsap.min.js’, array(), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘add_gsap_local’);

GSAP Basics for WordPress

GSAP works by animating DOM elements with a simple and efficient syntax.

✅ Example 1: Basic Animation

Add this code to a JavaScript file (animation.js) and load it into WordPress:

document.addEventListener(“DOMContentLoaded”, function() {
gsap.from(“.my-title”, { opacity: 0, y: -50, duration: 1 });
});

Explanation:

.my-title gradually appears with a downward movement.
opacity: 0 makes the element invisible at first.
y: -50 makes it go down 50 pixels.
duration: 1 means the effect lasts 1 second.

Then add this script in functions.php to include it:

function add_animation_gsap() {
wp_enqueue_script(‘custom-gsap’, get_template_directory_uri() . ‘/js/animation.js’, array(‘gsap’), null, true);
}
add_action(‘wp_enqueue_scripts’, ‘add_animation_gsap’);

Example 2: Scroll Reveal Effect (ScrollTrigger)

The GSAP ScrollTrigger plugin allows you to trigger effects based on the scrolling of the page.

gsap.registerPlugin(ScrollTrigger);

gsap.from(“.section-reveal”, {
scrollTrigger: {
trigger: “.section-reveal”,
start: “top 80%”,
toggleActions: “play none none reverse”
},
opacity: 0,
y: 50,
duration: 1.5
});

What it does:

When .section-reveal enters the viewport, it animates.
start: "top 80%" means the effect starts when the top of the element reaches 80% of the viewport.
toggleActions: "play none none reverse" allows the effect to replay when scrolling up.

Add the section-reveal class to your WordPress blocks to see the effect in action.

Integrate with Elementor and Gutenberg

🎨 Use with Elementor

If you are using Elementor, you can add custom JavaScript code in the “Custom Code” tab.

Add via CDN in Elementor > Custom Code.
Add animation code based on the CSS classes applied to your elements.

Example to animate an Elementor button:

document.addEventListener(“DOMContentLoaded”, function() {
gsap.to(“.elementor-button”, { scale: 1.1, duration: 0.5, repeat: -1, yoyo: true });
});

Optimization and Best Practices

✅ Load GSAP only when needed
If you are using GSAP on a single page, load it conditionally:

function load_gsap_only_when_necessary() {
if (is_page(‘animation-page’)) {
wp_enqueue_script(‘gsap’, ‘https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js’, array(), null, true);
}
}
add_action(‘wp_enqueue_scripts’, ‘load_gsap_only_when_necessary’);

Use the Timeline for sequential animations
Instead of triggering multiple effects separately, chain them together with a timeline:

let tl = gsap.timeline();
tl.from(“.title”, { opacity: 0, y: -50, duration: 1 })
.from(“.subtitle”, { opacity: 0, y: -30, duration: 0.8 }, “-=0.5”)
.from(“.button”, { opacity: 0, scale: 0.5, duration: 0.5 }, “-=0.3”);

Test your animations on mobile
Use matchMedia() to adapt animations to mobile screens:

gsap.matchMedia().add(“(max-width: 768px)”, () => {
gsap.to(“.image”, { x: 50, duration: 1 });
});

Conclusion

Integrating GSAP into WordPress is a great way to boost your site and improve the user experience. Whether for simple effects or advanced effects with ScrollTrigger, GSAP offers unparalleled flexibility.

📌 Key Takeaway:

GSAP is powerful and efficient.
It integrates easily with WordPress, Elementor and Gutenberg.
It allows advanced effects with a clear syntax.

Ready to transform your WordPress site with captivating animations? Try GSAP today!