--- 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 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? ## 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. 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. ## Frequently Asked Questions **Q: What do I need before starting to add global GSAP animations in Elementor?** A: 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. **Q: How do I activate the Global Animation Extensions in The Plus Addons for Elementor?** A: 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. **Q: What happens after I create a global animation?** A: After creating a global animation, you can reuse it across multiple widgets on different sections and pages, helping maintain consistency and save time. **Q: How can I create a global image animation using The Plus Addons for Elementor?** A: 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. **Q: Is there a way to create a global text animation in Elementor?** A: 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. **Q: What options do I have for triggers when setting up global scroll interactions?** A: 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.