How to Add Global GSAP Animation in Elementor?

Setting the same animation on twenty widgets by hand is slow, and the twenty-first is never quite the same as the others.

The Plus Addons for Elementor lets you save an animation once in Site Settings and then pick it from a dropdown wherever you need it. There are three separate lists: one for scroll animations on any element, one for text and one for images.

To see how the GSAP Scroll Interactions settings work on a single widget, click here.

Requirement – This extension is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: the extension is tagged Freemium. Basic and Global animations are in the free plugin and behave identically with Pro installed; Advanced frame animations need The Plus Addons for Elementor Pro.
• Status: the panel section is named GSAP Scroll Interactions (Beta) and the dashboard card carries a BETA badge, so settings and behaviour can still change.
• Elementor (free) installed and activated.
• Extension to enable: GSAP Scroll Interactions, in the Plus Special group under The Plus Addons > Extensions. It is off until you turn it on.
• Extension to enable (global text animations): Text Animation in the Plus Global group. It is tagged Free.
• Extension to enable (global image animations): Image Animation in the Plus Global group. It is tagged Pro, and the widgets that use it (Creative Image and Cascading Image) are Pro widgets.

Turn On the Extensions You Need

Each list appears in Site Settings only when its extension is on, so switch on the ones you plan to use.

1. Go to The Plus Addons > Extensions in your WordPress dashboard.
2. Turn on GSAP Scroll Interactions in the Plus Special group for global scroll animations.
3. Turn on Text Animation and Image Animation in the Plus Global group for global text and image animations.

List	Extension to turn on	Edition
Global Scroll Interactions	GSAP Scroll Interactions	Free
Global Text Animations	Text Animation	Free
Global Image Animations	Image Animation	Pro — the widgets that use it are Pro widgets

Open Site Settings

Edit any page with Elementor, click the Elementor logo at the top left of the panel and choose Site Settings. The lists you switched on appear as their own tabs.

Create a Global Scroll Animation

Open the Global Scroll Interactions tab and add an item to the list. These animations can be applied to any container or widget.

1. Give the animation a clear, unique Animation Name. You pick it by name later, so Section fade up beats My Animation.
2. Choose a Trigger: On Load or On Scroll.
3. Set Delay, Duration and Offset — the wait before it starts, how long it runs, and how far away in pixels it begins.
4. Choose an Animation Style (Fade, Slide or Scale), an Animation Effect easing curve and an Animation Direction.
5. Turn on Stagger Effect if the animation will be used on a group of items, then set Stagger Items and Stagger Depth Level.
6. Turn on Repeat only for decorative elements — it loops without stopping.
7. Save your changes.

The fields are the same as the Basic settings on a single element, but three labels are spelled out here: Animation Style, Animation Effect and Animation Direction are called Style, Effect and Direction in the widget panel.

Apply It to an Element

1. Open the page in Elementor and select the container or widget you want to animate.
2. Go to the Advanced tab and open GSAP Scroll Interactions (Beta).
3. Set Animation Type to Global.
4. Pick your animation from the Global Animation dropdown.

The saved settings are copied onto the element, so its direction, distance, duration, delay, style and easing all come from the list rather than from the element.

If a new animation is missing from the dropdown, save the page and reload the editor. The list is read when the panel loads.

Create a Global Text Animation

Open the Global Text Animations tab. These animations apply to the Heading Title and Text Block widgets from The Plus Addons, which split the text into characters or words and animate the pieces.

1. Give the animation a unique Animation Name.
2. Choose an Animation Type. There are five: Normal, Explode / Scatter, Scramble Text, Typing Effect and Text Style Swap. The rest of the fields change with your choice.
3. For Normal, set the starting position, skew, scale, rotation and transform origin, then pick a Split Type of Characters or Words.
4. For Text Style Swap, set the Text Color and typography the text swaps to.
5. Choose an Animation Trigger: On Load, On Scroll or On Hover. With On Scroll you can also turn on Enable Scroll Scrub to tie the animation to the scrollbar.
6. Set Duration, Delay and Stagger — Stagger is a number of seconds between each character or word, not a switch.
7. Pick an easing curve under Animation Effects, turn on Repeat if you want a loop, and save.

Apply It to a Text Widget

1. Add a Heading Title or Text Block widget to the page.
2. In the Text Animation section of the Content tab, turn on Enable Animation.
3. Set Animation to Global.
4. Pick your animation from the Global Animation dropdown.

Create a Global Image Animation

Open the Global Image Animations tab. These apply to the Creative Image and Cascading Image widgets, which are Pro widgets.

1. Give the animation a unique Animation Name.
2. Choose a Trigger Type: On Load, On Scroll or On Hover. With On Scroll you can turn on Enable Scroll Scrub.
3. Set Duration and Delay.
4. Set the starting state with X Offset, Y Offset, Skew X, Skew Y, Scale, Rotation and Opacity, and choose a Transform Origin for the scale and rotation to pivot around.
5. Pick a Clip Path shape if you want the image to be revealed through a mask, or choose Custom and put your own value in Custom Clip Path Value.
6. Pick an easing curve under Animation Effects and save.

Apply It to an Image Widget

1. Add a Creative Image or Cascading Image widget to the page.
2. In the Image Animation section of the Content tab, turn on Enable Animation.
3. Set Animation to Global.
4. Pick your animation from the Global Animation dropdown.

How It Behaves

• All three lists live in the site’s Elementor kit, so they are shared by every page on the site and one edit updates every element that uses the animation.
• Global scroll animations work the same in the free plugin and with Pro installed.
• Global text animations need the Text Animation extension, and global image animations need the Image Animation extension plus the Pro widgets that use them.
• Picking an animation copies its saved settings onto the element, so changing the element’s own Basic settings afterwards makes no difference.
• The dropdown on a widget is filled when the editor panel loads, so a newly saved animation needs a page save and a reload before it shows up.

Limitations

• The Trigger saved on a global scroll animation is ignored. Whether you save it as On Load or On Scroll, it plays when the page loads. If you need a scroll trigger, set Animation Type to Basic on the element and choose On Scroll there instead.
• Choosing Global without picking an animation still animates the element. It plays a plain 50 px slide-up with no fade rather than doing nothing, so leave Animation Type on None when you want no animation at all.
• Deleting an animation from a list leaves every element that used it without an animation, and the widget’s dropdown simply goes blank — there is no warning.
• The lists are per site, not per page, and they are stored with the Elementor kit, so they do not travel with an exported template.
• GSAP Scroll Interactions is marked Beta, so these settings can still change between releases.

Troubleshooting

A Site Settings tab is missing

Each tab only appears when its extension is on. Check GSAP Scroll Interactions, Text Animation and Image Animation under The Plus Addons > Extensions, then reload the editor.

My new animation is not in the Global Animation dropdown

Save the page and reload the Elementor editor. The dropdown is built from the saved list when the panel loads, so an animation created in the same session is not there yet.

The animation plays on load even though I saved it as On Scroll

This is a known limitation of global scroll animations. Set Animation Type to Basic on the element and pick On Scroll in the element’s own Trigger dropdown.

The Global Animation dropdown is empty on an image widget

Global image animations need the Image Animation extension, and the section only exists on the Creative Image and Cascading Image widgets from The Plus Addons for Elementor Pro.

Related Docs

• How to Use GSAP Animation in Elementor?
• How to Add a Follow Image Cursor in Elementor?
• How to Create Animated Rotating Circle Text in Elementor?