---
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-04-09
lang: en
author: "Aditya Sharma"
description: "Are you looking to create GSAP animation globally on your Elementor website? By saving animations globally, you can create them once and reuse them across multiple sections and pages. This..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Add-Global-GSAP-Animation-in-Elementor-1024x538.jpg
word_count: 1401
---

# How to Add Global GSAP Animation in Elementor?

## 

- Activates GSAP global animation features in The Plus Addons for Elementor by enabling GSAP Scroll Interaction, Global Text Animation, and Global Image Animation.
- Creates global scroll animations that can be triggered on page load or scroll using the Global Scroll Interaction tab in Elementor.
- Sets up global text animations with options like Normal, Explode/Scatter, Scramble Text, and Typing Effect in the Global Text Animations tab.
- Applies global image animations to Creative Image and Cascading Image widgets by selecting from the Global Animation dropdown in Elementor.

Are you looking to create GSAP animation globally on your Elementor website? By saving animations globally, you can create them once and reuse them across multiple sections and pages. This helps you maintain consistency, save time, and apply advanced animations without repeating the same setup.

With the GSAP global animation feature from The Plus Addons for Elementor, you can easily create GSAP animations globally and use them multiple times on different widgets.

## Required Setup

- Elementor FREE Plugin installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- Make sure the GSAP Scroll Interaction (freemium), Global Text Animation (free) and Global Image Animation (pro) are activated.

- To unlock the extra features, you need the[ PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text). 

## How to Activate Global Animation Extensions?

Go to 

- **The Plus Addons **→** Extensions **

- Turn on the **GSAP Scroll Interaction**, **Global Text Animation** (for text animation) and **Global Image Animation** (for image animation).

![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-global-extension-activate-1024x370.png)

## Key Features

- **Global Scroll Interaction** - You can create a global animation on page scroll or load and reuse on any widget.

- **Global Text Animations** - You can create a global animation for text.

- **Global Image Animations** - You can create a global animation for an image.

## Create Global Animation

Open the Elementor editor, then from the top, click on the **Elementor logo **>** Site Settings**.

From here, you can create global animations. Based on the activated extensions, you’ll see the options.

**Global Scroll Interaction** - You can create a global animation on page scroll or load.

**Global Text Animations** - You can create a global animation for text.

**Global Image Animations** - You can create a global animation for an image.

### Global Scroll Interaction

With this option, you can create a global animation that can be applied to any widget.

To set a global scroll animation, follow the steps. 

Click on the **Global Scroll Interaction** tab.

Then click on the **+ Add Scroll Interaction** button.

You’ll see a repeater item; open it.

In the **Animation Name** field, you can add the animation name. 

> *Note: Keep the name unique; you have to identify the animation by name while applying it later.*

Then, from the **Trigger** dropdown, you have to set the trigger. 

Here you’ll find two options - 

- **On Load** - To trigger the animation on page load.

- **On Scroll** - To trigger the animation on page scroll.

Select the option as per your requirement.

From the **Delay** section, you can add a delay to the animation.

Then you can set the animation duration from the **Duration** field.

After that, from the **Offset** field, you can set the space from the top when the animation starts.

From the **Animation Style** dropdown, you can set an animation style.

You can add an animation effect from the **Animation Effect** dropdown.

After that, you can set the animation direction from the **Animation Direction** section. 

By enabling the **Stagger Effect** toggle, you can add a delay between sequences.

Then, by enabling the **Repeat** toggle, you can repeat the animation.

You can click the **+ Add Scroll Interaction** button to create more global scroll animations.

Once done, click on the **Save Changes** button to save the animation.

#### Use Global Scroll Interaction Animation

Now, to use the global scroll interaction animation, open the page or post in Elementor editor.

> *Note: If you are using it on an element on the same page, save the page and reload it.*

1. Add the widget on which you want to add the animation. For instance, the Image widget here.

2. Go to the **Advanced **>** GSAP Scroll Interaction** tab.

3. Select **Global** from the **Animation Type** dropdown.

4. Then, from the **Global Animation** dropdown, select your animation.

> *Note: If you don’t see your animation name in the dropdown, reload the page.*

Now your global animation will be applied to your selected element.

### Global Text Animations

With this option, you can create a global text animation that can be applied to the Heading and Text Block widgets from The Plus Addons for Elementor.  

To set a global text animation, follow the steps.

Click on the **Global Text Animations** tab.

Then click on the **+ Add Global Animations** button.

You’ll see a repeater item; open it.

In the **Animation Name** field, you can add the animation name.

> *Note: Keep the name unique; you have to identify the animation by name while applying it later.*

From the **Animation Type** dropdown, you have to select the animation type. Here you’ll find four options - 

- **Normal** - With this option, you can create custom text animation.  

- **Explode / Scatter** - With this option, you can create an explode or scatter text animation effect.

- **Scramble Text** - With this option, you can create a scramble text animation effect.

- **Typing Effect** - With this option, you can create a text typing animation effect.

You’ll see different settings for each option. Select the option as per your requirements.

Let’s see the settings for the **Normal** option.

You can manually set the position, skew, scale, rotation and transform origin.

You can split the text by characters or words from the **Split Type** dropdown.

Then, from the **Animation Trigger** dropdown, you can set the trigger on page load, scroll or on hover.

From the **Duration** section, you can set the animation duration.

Then you can set a delay from the **Delay** field.

By enabling the **Stagger **toggle, you can add a delay between sequences.

You can add an animation effect from the **Animation Effect** dropdown.

Then, by enabling the **Repeat** toggle, you can repeat the animation.

You can click the **+ Add Global Animation** button to create more global text animations.

Once done, click on the **Save Changes** button to save the animation.

#### Use Global Text Animations

Now, to use the global text animation, open the page or post in Elementor editor.

> *Note: If you are using it on an element on the same page, save the page and reload it.*

1. Add the Heading or Text Block widget on which you want to add the animation. 

For instance, we’ll use the Text Block widget here.

2. Go to the **Text Animation** tab, and enable the **Enable Animation** toggle.

3. Select **Global** from the **Animation Type** dropdown.

4. Then, from the **Global Animation** dropdown, select your animation.

> *Note: If you don’t see your animation name in the dropdown, reload the page.*

Now your global text animation will be applied to your selected text element.

### Global Image Animations

With this option, you can create a global image animation that can be applied to the Creative Image and Cascading Image widgets of The Plus Addons for Elementor.  

To set a global image animation, follow the steps.

Click on the **Global Image Animations** tab.

Then click on the **+ Add Global Animations** button.

You’ll see a repeater item; open it.

In the **Animation Name** field, you can add the animation name.

> *Note: Keep the name unique; you have to identify the animation by name while applying it later.*

From the **Animation Trigger** dropdown, you can set the trigger on page load, scroll or on hover.

From the **Duration** section, you can set the animation duration.

Then you can set a delay from the **Delay** field.

You can manually set the offset, skew, scale, rotation and opacity.

Then, from the **Transform Origin** dropdown, you can set the transform origin.

After that, from the **Clip Path** dropdown, you can add a mask to the image.

Then, you can add an animation effect from the **Animation Effect** dropdown.

You can click the **+ Add Global Animation** button to create more global image animations.

Once done, click on the **Save Changes** button to save the animation.

#### Use Global Image Animations

Now, to use the global image animation, open the page or post in Elementor editor.

> *Note: If you are using it on an element on the same page, save the page and reload it.*

1. Add the Creative Image or Cascading Image widget on which you want to add the animation. 

For instance, we’ll use the Creative Image widget here.

2. Go to the **Image Animation** tab, and enable the **Enable Animation** toggle.

3. Select **Global** from the **Animation Type** dropdown.

4. Then, from the **Global Animation** dropdown, select your animation.

> *Note: If you don’t see your animation name in the dropdown, reload the page.*

Now your global image animation will be applied to your selected image element.