How to Add Global GSAP Animation in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor allows users to create GSAP animations globally and reuse them across multiple sections and pages.
  • Global Scroll Interaction enables users to create animations triggered on page load or scroll for any widget.
  • Global Text Animations can be applied to Heading and Text Block widgets, offering options like Normal, Explode/Scatter, Scramble Text, and Typing Effect.
  • Global Image Animations can be applied to Creative Image and Cascading Image widgets, allowing customization of animation duration, delay, and effects.
Table Of Content

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

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).
Gsap global extension activate how to add global gsap animation in elementor? From the plus addons for elementor

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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What do I need before starting to add global GSAP animations in Elementor?

You need to have the Elementor FREE Plugin and The Plus Addons for Elementor plugin installed and activated. Additionally, ensure that the GSAP Scroll Interaction, Global Text Animation, and Global Image Animation features are activated.

How do I activate the Global Animation Extensions in The Plus Addons for Elementor?

To activate the Global Animation Extensions, go to The Plus Addons u2192 Extensions and turn on the GSAP Scroll Interaction, Global Text Animation, and Global Image Animation.

What happens after I create a global animation?

After creating a global animation, you can reuse it across multiple widgets on different sections and pages, helping maintain consistency and save time.

How can I create a global image animation using The Plus Addons for Elementor?

To create a global image animation, click on the Global Image Animations tab, then click on + Add Global Animations. Enter a unique animation name, set the animation trigger, duration, and effects, and save your changes.

Is there a way to create a global text animation in Elementor?

Yes, you can create a global text animation by clicking on the Global Text Animations tab and then clicking on + Add Global Animations. You can choose from various animation types like Normal, Explode/Scatter, Scramble Text, or Typing Effect.

What options do I have for triggers when setting up global scroll interactions?

When setting up global scroll interactions, you can choose between two triggers: On Load, to trigger the animation when the page loads, or On Scroll, to trigger the animation during scrolling.

Last reviewed: April 9, 2026

Related Docs