---
title: "How to Add Global GSAP Animation in Elementor?"
url: https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/
date: 2026-01-06
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Add-Global-GSAP-Animation-in-Elementor-1024x538.jpg
word_count: 1428
---

# How to Add Global GSAP Animation in Elementor?

## 

- The Plus Addons for Elementor saves a global animation once in Site Settings and lets the user pick it from a dropdown on any matching element, which avoids setting the same animation on twenty widgets by hand.
- GSAP Scroll Interactions offers three separate global lists: scroll animations for any element, text animations, and image animations, and the panel section is named GSAP Scroll Interactions (Beta).
- Global Text Animations apply to the Heading Title and Text Block widgets, with five Animation Type options: Normal, Explode / Scatter, Scramble Text, Typing Effect and Text Style Swap.
- Global Image Animations apply to the Creative Image and Cascading Image widgets, and they support Trigger Type options On Load, On Scroll or On Hover plus settings like X Offset, Y Offset, Skew X, Skew Y, Scale, Rotation, Opacity and Clip Path.

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](https://theplusaddons.com/docs/use-gsap-animation-in-elementor/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/pricing/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

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

![The Plus Addons Extensions screen with the Plus Global group showing the Text Animation and Image Animation cards switched on](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-extensions.webp)

| 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.

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

![The Global Scroll Interactions tab of Elementor Site Settings with one saved animation open and its fields visible](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-site-settings.webp)

> *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

- Open the page in Elementor and select the container or widget you want to animate.- Go to the **Advanced** tab and open **GSAP Scroll Interactions (Beta)**.- Set **Animation Type** to **Global**.- 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.

- Give the animation a unique **Animation Name**.- 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.- For **Normal**, set the starting position, skew, scale, rotation and transform origin, then pick a **Split Type** of Characters or Words.- For **Text Style Swap**, set the **Text Color** and typography the text swaps to.- 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.- Set **Duration**, **Delay** and **Stagger** — Stagger is a number of seconds between each character or word, not a switch.- Pick an easing curve under **Animation Effects**, turn on **Repeat** if you want a loop, and save.

![The Global Text Animations tab of Site Settings with a saved animation open](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-text-site-settings.webp)

### Apply It to a Text Widget

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

![The Text Animation section of a Text Block widget with Animation set to Global and a saved animation chosen](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-text-select.webp)

## 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.

- Give the animation a unique **Animation Name**.- Choose a **Trigger Type**: On Load, On Scroll or On Hover. With On Scroll you can turn on **Enable Scroll Scrub**.- Set **Duration** and **Delay**.- 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.- 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**.- Pick an easing curve under **Animation Effects** and save.

![The Global Image Animations tab of Site Settings with a saved animation open](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-image-site-settings.webp)

### Apply It to an Image Widget

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

![The Image Animation section of a Creative Image widget with Animation set to Global and a saved animation chosen](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-image-select.webp)

## 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?](https://theplusaddons.com/docs/use-gsap-animation-in-elementor/)- [How to Add a Follow Image Cursor in Elementor?](https://theplusaddons.com/docs/add-a-follow-image-cursor-in-elementor/)- [How to Create Animated Rotating Circle Text in Elementor?](https://theplusaddons.com/docs/animated-rotating-circle-text-in-elementor/)