GSAP works on any WordPress site with no plugin and no build step. This page covers where the code goes, how the block editor and page builders change the job, what breaks it in production, and 4 tutorials that build a specific effect end to end.
All 108 premium effects and templates, plus every future effect and template we release. That's £0.36 per item.
Buy individually now: up to £10 comes off the Vault later
Yes, and there is less to it than most tutorials suggest. GSAP is a plain JavaScript library with no build step and no framework requirement, so using it in WordPress is the same job as using any other script: enqueue the library, enqueue your animation file after it, and target elements that exist on the page. There is no WordPress-specific API to learn and no integration layer in between.
What makes WordPress feel harder than a static site is everything around the script rather than the script itself. Your theme decides where the code lives and whether it survives an update. Your page builder decides what the markup looks like and how stable the class names are. Your caching or optimisation plugin decides whether the file loads in the order you asked for, or at all. Almost every "GSAP does not work in WordPress" thread turns out to be one of those three, not a problem with GSAP.
Since the GSAP 3.13 release in April 2025 the full plugin set is free, including on commercial sites, so ScrollTrigger, SplitText, Flip and the rest are all available to a WordPress build with no membership and no licence key to manage. That removes the old reason WordPress animation work leaned on bloated slider and animation plugins.
The sections below cover where to put the code, which route suits which kind of site, what tends to break, and the WordPress tutorials on this site that build a specific effect end to end.
The reliable route is a proper enqueue from a child theme. It survives theme updates, it loads on the pages you choose, and the dependency array guarantees the plugins load after the core library. If you are not comfortable editing theme files, a code snippets plugin runs the same code from the admin.
Edits to a parent theme are wiped by the next theme update, which is how animation code silently disappears months later. Put the enqueue in a child theme functions.php, or use a code snippets plugin that stores the PHP in the database instead.
Register the core library, then each plugin with the core handle in its dependency array so the order is guaranteed. Loading the whole plugin set out of habit ships code the page never calls, and every extra file is a request your caching plugin will want to touch.
Keep the animations in a real .js file in the child theme with your GSAP handles as its dependencies, rather than inline in a template or a Custom HTML block. It stays in version control, it is cacheable, and it is one handle to exclude when an optimisation plugin misbehaves.
Call gsap.registerPlugin() once before the first tween: skipping it is the usual reason an effect runs but does nothing. Then bind to a class you added yourself in the block Advanced panel or the builder, not to generated markup like elementor-element-a1b2c3, which changes the moment somebody duplicates the section.
Optimisation plugins often behave differently for logged-in administrators, so a page that animates for you can be static for everyone else. Purge the cache, open the page in a private window, and check it again with reduced motion enabled.
<?php
// Child theme functions.php. GSAP from CDN, your animations after it.
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script(
'gsap',
'https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js',
array(),
'3.14.2',
array( 'strategy' => 'defer', 'in_footer' => true )
);
wp_enqueue_script(
'gsap-scrolltrigger',
'https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js',
array( 'gsap' ),
'3.14.2',
array( 'strategy' => 'defer', 'in_footer' => true )
);
$animations = '/js/animations.js';
wp_enqueue_script(
'site-animations',
get_stylesheet_directory_uri() . $animations,
array( 'gsap', 'gsap-scrolltrigger' ),
filemtime( get_stylesheet_directory() . $animations ),
array( 'strategy' => 'defer', 'in_footer' => true )
);
} );The array in the fifth argument needs WordPress 6.3 or later; on older versions pass true instead to load in the footer. Deferred scripts still execute in document order, so the dependency array keeps ScrollTrigger after the core library. Using filemtime() as the version means a saved edit busts the browser cache without a manual bump.
The routes below cover almost every WordPress site, and they differ mainly in how much they survive: an enqueue from a child theme outlives page rebuilds and theme updates, a snippet pasted into a single block does not.
| Route | Best for | What to watch |
|---|---|---|
| Child theme enqueue | Classic themes and anything you maintain yourself. The only route that gives you conditional loading, dependency order and version busting in one place. | Needs file access and a child theme that actually exists. Enqueueing on every page when one page uses the animation is the most common waste here: wrap it in a template or is_page() check. |
| Code snippets plugin | Sites where you cannot or should not touch theme files, and for clients who will change themes later. WPCode and similar plugins run the same wp_enqueue_script code from the admin. | The snippet lives in the database, so it is invisible to version control and easy to lose in a migration. Keep a copy of the PHP in the repo even though it does not run from there. |
| Block theme and full site editing | Modern block themes. Despite the editor being visual, scripts are still enqueued from functions.php exactly as in a classic theme. | The editor canvas is an iframe, so a front-end script does not run inside it and your animation will not preview in the editor. That is expected, not a bug. Judge the result on the front end. |
| Page builder custom code | Elementor, Bricks, Divi and similar, where the builder has its own custom code panel and you want the animation tied to one page. | Builder markup is generated, so class names and nesting change when a section is duplicated or a widget is swapped. Add your own class in the builder Advanced panel and target that, never the generated one. |
| Custom HTML block | A one-off animation on a single page, or testing an effect before committing to a proper enqueue. | No dependency management, no cache busting, and the code is buried inside post content where nobody will find it later. Fine as a trial, poor as a permanent home. |
Each one gives you a complete, working basic version you can paste into a WordPress site, then explains what the full effect adds on top.
Animate a grid of cards into view with a staggered scroll reveal in WordPress using GSAP and ScrollTrigger. Directional stagger, no plugin required.
Build a smooth infinite marquee for WordPress using GSAP. Scrolling text, logo strips, and ticker bars with no plugin required.
Build a custom cursor follower for WordPress using GSAP. No plugins needed, just clean JavaScript with smooth magnetic and trail effects.
Add a simple text decode animation to your WordPress site using GSAP. Text appears scrambled and reveals on scroll - no plugin required.
Combine, defer and especially "delay JavaScript until user interaction" are the single biggest cause of animation that works locally and dies in production. Delayed scripts run long after page load, so ScrollTrigger measures a page the user has already scrolled. Exclude the GSAP handles and your animation handle from combining and delay, then purge and retest signed out.
Lazy-loaded images, web fonts and sliders all change element positions after ScrollTrigger has calculated its start and end points, which leaves triggers firing at the wrong scroll position. Give images explicit width and height attributes so they reserve space, and call ScrollTrigger.refresh() once everything has loaded.
Selectors like .elementor-element-4f2a91 or nth-child positions inside a builder row are not stable. Duplicating a section, reordering columns or updating the builder regenerates them, and the animation quietly stops matching anything. Add your own class through the block or widget Advanced panel and target that.
Since WordPress 6.3 the block editor canvas renders in an iframe, and front-end scripts are not loaded into it. An animation that does nothing in the editor is normal. Equally, an animation that only sets up on DOMContentLoaded will not re-run when a builder re-renders a section live, so guard your init and re-run it rather than assuming a single page load.
WordPress ships jQuery and many themes still depend on it, but GSAP does not need it. Do not wrap animation setup in a jQuery ready block just because the theme does, and do not add jquery to your dependency array: that only forces an extra file to load before your code can run.
If your start state hides elements and something stops the script, a caching plugin, a JavaScript error from another plugin, or a visitor with reduced motion, the page ships blank sections. Set the hidden start state behind a class that JavaScript adds, and make sure the reduced-motion path shows the finished state rather than nothing.
Each of these is the full version of an effect the tutorials introduce. Plain HTML, CSS and JavaScript with no plugin to install: enqueue the script from your theme and match the selectors to your markup. £5 each.
Yes. GSAP is a standard JavaScript library with no build step, so it works on any WordPress site. Enqueue GSAP from your child theme functions.php or a code snippets plugin, enqueue your animation file with GSAP in its dependency array, and target the elements on the page. There is no WordPress-specific version of GSAP and no integration layer required.
No. A WordPress animation plugin is a convenience wrapper, not a requirement, and most of them ship far more code than one animation needs. The only thing you might want a plugin for is a place to store PHP when you cannot edit theme files, which is what a code snippets plugin does.
In a child theme: the wp_enqueue_script calls in functions.php, and the animation itself in its own .js file in the child theme directory. That survives theme updates, gives you dependency order and cache busting, and keeps the code in version control. A Custom HTML block works for a quick test but is a poor permanent home.
Yes. Since the GSAP 3.13 release in April 2025 the full plugin set, including SplitText, MorphSVG, Draggable and InertiaPlugin, is free under the GSAP Standard License, commercial projects included. There is no membership to buy and no licence key to install on the site.
Almost always a caching or optimisation plugin. Combining, deferring, or delaying JavaScript until user interaction changes when your code runs relative to the page, and delayed execution in particular makes ScrollTrigger measure a page that has already been scrolled. Exclude the GSAP and animation handles from those features, purge the cache, and test in a private window because optimisation is often skipped for logged-in administrators.
Yes. All of them let you add custom JavaScript, either in a page-level code panel or through the theme. The friction is selectors rather than GSAP: builder markup is generated and the class names change when sections are duplicated or widgets swapped. Add your own class in the builder Advanced panel and animate that.
Usually not, and that is expected. Since WordPress 6.3 the editor canvas is an iframe and front-end scripts are not loaded into it, so your animation will not preview while editing. Check the result on the front end instead of trying to make the editor run the code.
The library itself is small and runs every animation off a single requestAnimationFrame tick, which is more efficient than several animation plugins each running their own loop. In practice GSAP usually replaces heavier code rather than adding to it. Performance problems come from what you animate, layout properties instead of transforms and opacity, and from loading plugins the page never uses.
No. What we sell is effects and templates as plain HTML, CSS and JavaScript, which you enqueue in WordPress like any other script. There is no plugin, block library or theme product, and nothing here needs activating against a licence server. That also means nothing breaks when you change theme: the animation code is yours and is not tied to a plugin update cycle.
Not as a drop-in theme. A template is a complete static site, so using one in WordPress means porting its sections into your theme or builder and enqueueing its script and stylesheet the same way you would any other. The markup and CSS are ordinary and unminified, which makes that a copy-and-adapt job rather than a rewrite, but it is still development work.
66 effects at £5 each and 54 full site templates at £10, all plain HTML, CSS and JavaScript. Everything current and future is in the Effects & Templates Vault for £39.
Your cart is empty
Browse Effects
