Beginner How to Make GSAP Work in Elementor for WordPress

If you’re anything like us, you’re always looking for new ways to take your website to the next level. One of the best ways to do that is to add motion and interactivity using GreenSock Animation Platform, or GSAP for short. At its core, GSAP is a powerful yet flexible JavaScript animation library that allows you to bring any element of a webpage to life. GSAP also hosts a range of plugins that expand its core capabilities on an as-needed basis, like ScrollTrigger for scroll-based animation and SplitText that breaks up text into characters, words or lines for mindblowing effects. Each plugin adds an extra layer of engagement to your site so you can, per their tagline, “Animate Anything.”

You might’ve found a simple tutorial, or maybe a sample Codepen of the perfect animation, and want to incorporate it into your design. However, knowing what to use and how – or even where – to use it are very different things, especially if you’re new to custom development. Alternatively, you may already have the animation working but can’t quite figure out how to set it up so it works throughout the website. And while GSAP provides a wealth of documentation, as a novice it might make about as much sense as a penguin speaking gibberish.

Follow this quick and easy, step-by-step beginner’s guide to learn how to install and set up GSAP globally on your WordPress website.

Before we begin, let’s identify where the code will live. Having a central location for all your custom code is an excellent way to keep track of your animations for future maintenance. There are many free custom code plugin options available, but since we’re using Elementor Pro we’ll be using their built-in feature. This can be found in the lefthand panel of your WordPress Dashboard by hovering over Elementor and selecting Custom Code.

Step 1: Loading the GSAP Libraries

The first step we need to take is to call the GSAP libraries we’re going to need. Of course, this will depend on the needs of your specific project, but for the purpose of this tutorial we’ll focus on GSAP Core and SplitText.

GSAP is always evolving, but they make it easy to find the most recent versions of all their plugins. Simply visit the Install Helper in their Installation documentation to find the latest versions of the plugins you’ll need. You don’t need to worry about updating your library with each update, though. All past GSAP versions are continuously supported so you never have to worry about your animations breaking.

Visiting the Install Helper, you’ll notice there are three methods to call for the GSAP libraries: NPM (‘Node Package Manager’), Yarn (‘Yet Another Resource Manager’), and CDN (‘Content Delivery Network’). But what does all that mean? Let’s break it down.

What’s the difference between NPM, Yarn and CDN for GSAP?

NPM and Yarn are both what are known as “package managers,” meaning the code is downloaded and managed directly within your local computer or build server. This allows for local or offline development. Both NPM and Yarn give developers exact control over file versions, customization and advanced processes, like code minification. These methods require a bit more technical knowledge, so they may not be the best option if you’re just dipping your toes in the GSAP water.

CDN, on the other hand, relies on a global network of servers, called “edge servers,” to deliver various kinds of content we see on the internet. Things like images, videos, CSS and JavaScript all depend on these types of networks. Using the CDN method can reduce load times as popular libraries might already be stored in a user’s browser from visiting other websites, plus it reduces bandwidth on your main server. Conversely, this method requires internet in order to access libraries, and those libraries cannot be easily modified for a project’s exact requirements, making this method the less-ideal choice for more experienced developers.

As you can probably tell, the best method for our case is to load the libraries via CDN. Select the CDN tab of the Install Helper, then toggle the SplitText checkbox to add it to our list of libraries to load.

Next, log in and navigate to the dashboard of your WordPress website and find the Elementor Custom Code section.

Create a new snippet by selecting the button toward the top of the page labeled New Code and give it a recognizable name so you can easily find it later on. Let’s call it Load GSAP Libraries (Step 1). With the scripts copied to your clipboard, paste the code into the code editor.

Where do I put my GSAP script? Does Location matter?

Next, set the Location of where the code will be placed. For the best performance, we’ll choose </body> – End. Placing the code just before the closing body tag tells the browser to render the HTML and CSS content first. That way when the GSAP script runs, all of the elements to be animated are loaded into the DOM and ready for action.

If we were to load the script in either <head> or <body> – Start, the elements GSAP searches for may not yet exist, resulting in errors or failure.

Now that we have the Location set, let’s move onto the Priority. Each code snippet you add can be assigned a numerical priority of 1 through 10, with 1 being the highest priority and 10 being the lowest. This means lower numbers will load before higher numbers.

Think of it like baking a cake: we need to gather the ingredients before we can begin mixing them. Since we need to load the the animation libraries before the page can try to use the libraries, we’ll assign Load GSAP Libraries (Step 1) a priority of 1.

Remember kids: Step 1 = Priority 1.

With the title and code added, and location and priority assigned, we’ll Publish this snippet and choose our Display Conditions to choose which pages will load the GSAP libraries. If you only plan to use GSAP animation on the home page, it’s good practice to assign it only to that page to improve loading times throughout your site. If you’re not sure, you can always come back and change it later.

Step 2: Registering GSAP Plugins

Flipping back to the GSAP Installation Helper tab, you’ll find a neighboring snippet just below the one we copied in Step 1. This snippet is important because:

1. the addEventListener line tells the browser to wait until all elements are loaded before attempting to animate them, providing another safeguard against animation failures.
2. the registerPlugin line tells the Core library that we’re using the SplitText plugin and links it to the main Core framework, making it available for use.

Copy the code to your clipboard, and return to the Custom Code section of your WordPress site and create a new snippet. We’ll call this Register GSAP Plugins (Step 2). Paste the snippet into the code editor.

Set the Location to </body> – End, just like we did in the Step 1. This time, we’ll need to set the Priority to 2 to make sure the libraries are loaded before we initialize them.

Publish and assign display conditions as needed.

Step 3: Adding Your Animations

Now that our libraries are loaded and our plugins are primed, we can move on to adding our animations. The way we like to set this up is by creating a separate snippet for each independent animation. That way when we come back to our code to adjust it or copy it for another project, we can easily differentiate between animations.

Create a new snippet and paste your animation inside the <script> tags. We’ll use </body> – End for the Location again, but this time, we’ll set the Priority to 3.

Publish and assign display conditions. Assuming your webpage is already built and appropriate classes are assigned to your animated elements, your animations should be all set to go. Refresh the page on which your animations will execute to preview the results.

Repeat Step 3 for each animation you implement. All animation scripts may use the same location (</body> – end) and priority (3). The most important thing is to make sure the libraries are loaded and initialized in Steps 1 and 2, respectively.

Final Notes

Remember, there is no need to continue to use the registerPlugin code within each animation now that we’ve told the site to use it. If you do re-register it by mistake, the animation will function all the same. Our setup just reduces the amount of code that the website must read, improving your site’s performance.

Animating with GSAP can be a lot of fun once it’s up and running. Hopefully this guide has helped clear up any questions you had about getting started with GSAP on your WordPress website. Be sure to keep an eye out over on the GSAP forum for inspiration and help animating.