Try building one hero section where the headline, a product image, and three feature cards each enter at their own pace as the visitor scrolls.
Elementor’s built-in Motion Effects get you most of the way, then hit a wall. The timing is all or nothing, the cards cannot be choreographed independently, and the moment you want one element to wait for another, you are stuck. That is the exact gap GSAP fills.
GSAP, the GreenSock Animation Platform, is the animation engine behind a lot of the scroll-driven sites you have admired on showcase galleries. The catch for WordPress users has always been that Elementor has no native GSAP support, so wiring it in by hand meant writing JavaScript.
This guide shows two honest ways to add GSAP animations in Elementor: a free manual method for people comfortable with a code snippet, and a no-code route using The Plus Addons for Elementor, which now ships GSAP scroll interactions built into its free version.
I will also be straight about when you do not need GSAP at all.
What Is GSAP, and Does Elementor Support It Natively?
GSAP is a JavaScript animation library that moves elements along a timeline with precise control over sequence, easing, and triggers. Its companion tool ScrollTrigger ties any animation to the scroll position, so you can start, scrub, or pin an element exactly where you want on the page.
It is the same toolset professional motion designers reach for when CSS transitions are not enough.
Elementor does not integrate GSAP on its own. The animation Elementor gives you out of the box is Motion Effects, a set of scroll and mouse transforms applied per element.
Motion Effects are great for a single moving hero or a simple parallax background, but they cannot choreograph several elements on one shared timeline, and there is an open Elementor feature request asking for native GSAP support that has not shipped.
So if you want true GSAP in Elementor today, you add it yourself or you use an addon that bundles it.
One thing that changed the math here: GSAP used to lock its best plugins behind a paid Club GreenSock membership. As GreenSock now states on its site, “GSAP is now free for everyone, thanks to Webflow’s support!”
That now includes the full plugin toolkit, so cost is no longer a reason to avoid it.
GSAP vs Elementor’s Built-In Motion Effects
Before you add anything, be honest about whether you need GSAP. For a lot of pages, Elementor’s native Motion Effects are the right call.
Stick with native Motion Effects when you want one scroll or mouse effect on a hero element, a gentle background drift, or a basic parallax look. These are covered well by Elementor itself, and we walk through them in our guides on how to add scroll animations in Elementor and how to add a parallax effect in Elementor.
Reach for GSAP when you need several elements to animate in a deliberate order, a list or grid that reveals one item at a time, an animation that scrubs forward and backward as the visitor scrolls, or a section that pins in place while content moves through it. That level of choreography is what GSAP and ScrollTrigger were built for, and it is the part Motion Effects cannot reach.
The Two Ways to Add GSAP Animations in Elementor
There are two practical routes. One is manual and free if you are comfortable with a code snippet. The other is no-code and is the one I reach for on client work.
Method 1: Add GSAP Manually with a Code Snippet
The hands-on route is to load GSAP yourself and write the animation in JavaScript. In broad strokes: enqueue GSAP and ScrollTrigger from a CDN, drop an HTML or Code widget onto the page, give the element you want to animate a CSS class, then write a short script that targets that class and defines the timeline.
GSAP’s own documentation is excellent, and because the library is now free, there is nothing to buy.
The honest tradeoff is maintenance. You own the snippet, you manage the CDN version, and there is no visual preview inside the Elementor editor, so every change means editing code and refreshing the page.
For a developer building one signature animation, that is fine. For a content team that needs to adjust effects later, it becomes a support ticket waiting to happen.
Method 2: Add GSAP Without Code Using The Plus Addons for Elementor
The Plus Addons for Elementor builds GSAP straight into the Elementor editor through a feature called GSAP Scroll Interactions.
It ships in the free version of the plugin, so you can apply GSAP scroll, text, and image animations to widgets like Text, Heading, Creative Image, Cascading Image, and Number Counter without writing a line of JavaScript.
The preset animations are free, and a Custom animation type sits in the Pro version for people who want to define their own.
This is the option I recommend for most sites. The animation lives in the editor where you can see and tweak it, the controls are responsive so you can dial effects down per device, and you are not maintaining a script.
It is also one of the few mainstream Elementor addons that bundles real GSAP rather than CSS-only effects, which is the whole reason it earns the recommendation here.
Step by Step: Add a GSAP Scroll Animation with The Plus Addons for Elementor
Here is the full no-code flow on a real widget.
- Install The Plus Addons for Elementor. Add it from the WordPress plugin directory, where the free version has more than 100,000 active installs and a 4.6 out of 5 rating, then activate it alongside Elementor.
- Pick the element you want to animate. Drop in or select a Heading, Text, or image widget, then open the Advanced tab in the Elementor panel.
- Turn on GSAP Scroll Interactions. Enable the GSAP animation option and choose a preset animation type for how the element should enter as the visitor scrolls.
- Tune the timing. Set the offset so the animation starts at the right scroll position, and adjust the duration so the motion feels intentional rather than rushed.
- Set per-device behavior. Heavy motion on phones can hurt both performance and comfort, so scale the effect down or switch it off on mobile before you publish.
Using GSAP Stagger for Lists, Grids, and Testimonials
The single most useful GSAP touch is stagger, where a group of elements enters one after another instead of all at once. The Plus Addons for Elementor added GSAP scroll stagger so cards in a list, items in a grid, and cards in the Testimonial widget reveal in sequence as the section scrolls into view.
A staggered row of testimonials reads as genuine social proof building up, not a slideshow firing at once, and a feature grid that cascades in guides the eye down the page. It is a small effect that does a lot of the heavy lifting for a polished feel.
If you want to layer in other motion, GSAP animations pair well with the rest of the library, including effects like Lottie animations and CSS hover effects, as long as you keep the overall page restrained.
Is GSAP Free to Use?
Yes. GreenSock states plainly that “GSAP is now free for everyone, thanks to Webflow’s support!” That covers the core library and its full set of plugins. So the manual method costs nothing beyond your time.
On the no-code side, the GSAP Scroll Interactions feature in The Plus Addons for Elementor is available in the free version too, with a Custom animation type reserved for Pro.
Between the two, you can get real GSAP motion onto an Elementor page without paying for the animation itself.
Will GSAP Slow Down Your Site? Performance and Accessibility
GSAP is light and well optimized, but any animation adds JavaScript and asks the browser to do work while the page loads and scrolls. Overused, that can drag on your Largest Contentful Paint and create layout shift, the same Core Web Vitals you do not want to lose.
The fix is restraint: animate the few sections that earn it, not every block on the page. Our guide on Elementor Core Web Vitals covers how to keep scores healthy while you do this.
Accessibility matters just as much. Large scroll-driven motion can make some visitors feel genuinely unwell, which is why browsers expose a “reduce motion” setting.
Respect it, keep critical content readable without the animation, and avoid motion on text people are trying to read. Good GSAP work is felt, not noticed.
Which Method Should You Use?
If you are a developer building one signature animation and you want full control of the timeline, write it by hand with GSAP and ScrollTrigger. You will get exactly what you picture, and the library is free.
For everyone else, and for any site a content team has to maintain, the no-code GSAP Scroll Interactions in The Plus Addons for Elementor is the better choice.
You get genuine GSAP motion, including stagger, inside the editor, with responsive controls and no script to babysit. It is the route I would pick for client work, and it starts in the free version.
If you are still assembling your toolkit, our roundup of the best Elementor addons shows where it fits.
Wrapping Up
Elementor will not give you GSAP on its own, but you have two clean ways to add it: a free code snippet if you like to build by hand, or the no-code GSAP Scroll Interactions built into The Plus Addons for Elementor if you want the result without the maintenance.
Either way, keep the motion purposeful, mind your Core Web Vitals, and respect reduced-motion preferences.
The Plus Addons for Elementor packs GSAP animations alongside more than 120 widgets and extensions, with a free version on WordPress.org and paid plans from $39 a year. If you want to add real scroll-driven motion to your Elementor pages today, it is the fastest way there.
![Top 3 Elementor Agency Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Agency-Templates.jpg)
![Top 3 Elementor Photography Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Photography-Templates.jpg)
![Top 3 Elementor Architecture Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Architecture-Templates.jpg)
![Top 3 Elementor Restaurant Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Restaurant-Templates.jpg)
![Top 3 Elementor Travel Templates [Complete Kit]](https://theplusaddons.com/wp-content/uploads/2025/06/Elementor-Travel-Templates.jpg)