--- title: "How to Use GSAP Animation in Elementor?" url: https://theplusaddons.com/docs/use-gsap-animation-in-elementor/ date: 2026-01-06 modified: 2026-06-01 lang: en author: "Aditya Sharma" description: "Are you looking to add advanced GSAP animation to your Elementor website? GSAP (GreenSock Animation Platform) is an animation library that lets you create smooth, high-performance animations that go beyond..." image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Use-GSAP-Animation-in-Elementor-1024x538.jpg word_count: 2075 --- # How to Use GSAP Animation in Elementor? ## - GSAP is a powerful animation library that enhances Elementor websites with smooth animations. - The Plus Addons for Elementor provides the GSAP Scroll Interaction feature for adding animations to any element. - Users must activate the GSAP Scroll Interactions extension in The Plus Addons to utilize its features. - Animation types include Global, Basic, and Advanced, each with customizable settings for triggers and effects. - Advanced options allow for complex animations, including parallax effects and custom selectors for precise targeting. Are you looking to add advanced GSAP animation to your Elementor website? GSAP (GreenSock Animation Platform) is an animation library that lets you create smooth, high-performance animations that go beyond basic CSS effects. With GSAP, you can control how elements move, fade, scale, or react to scrolling and user actions. The GSAP Scroll Interaction feature in [The Plus Addons for Elementor](https://theplusaddons.com/) lets you add GSAP animation to any widget on your Elementor website without writing any JavaScript. **Best Used For:** - SaaS landing pages using scroll-driven storytelling where content animates as users scroll through sections - Portfolio and agency websites creating scroll-triggered reveals, parallax effects, and draw-on-scroll SVG animations - Marketing sites using interactive sections where elements move, fade, or scale based on visitor scroll position ## Required Setup - Elementor FREE Plugin installed & activated. - You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated. - Make sure the GSAP Scroll Interactions extension is activated, to verify this visit The Plus Addons → Extensions → and search for GSAP Scroll Interactions and activate. - This is a Freemium feature 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 the GSAP Scroll Interaction Extension? Go to  - **The Plus Addons **→** Extensions ** - **Search** the extension name and **turn on the toggle.** ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-activate.png) ## Key Features - **Global** – Apply a saved GSAP animation preset to any widget on the page. Use this when you want to reuse the same animation across multiple elements without reconfiguring it each time. - **Basic** – Add a GSAP animation triggered on page load or scroll, with controls for delay, duration, motion style, and repeat. Use this for entrance animations where elements fade in, slide up, or scale as they enter the viewport. - **Advanced** – Build complex scroll-based animations using repeater frames with full control over motion, appearance, visual effects, parallax, and sticky behavior. Use this when you need scroll-driven storytelling or frame-by-frame animation tied to scroll position. ## How to Use GSAP Animation? To use the GSAP animation, add any widget to the page or post where you want to add the animation and follow the steps. 1. Go to the **Advanced **>** GSAP Scroll Interaction** tab. 2. From the **Animation Type** dropdown, select the animation type. You will find the following options. - **Global** – Apply a pre-saved global animation. Use this when you want to apply the same animation to multiple widgets across the page. - **Basic** – Add an animation triggered on page load or scroll. Use this for entrance animations as elements come into view. - **Advanced** – Build frame-by-frame scroll-based animations with motion, appearance, and visual effect controls. Based on your selected animation type, you will see different settings. Customize the settings according to your requirements to create the animation. The following sections cover each animation type. ### Use Global Animation To add a global animation to any widget, you have to [create the global animation first](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/#Global-Image-Animations). To add a global animation to a widget, select **Global** from the **Animation Type** dropdown. Then, from the **Global Animation** dropdown, select your animation. ### Use Basic Animation To add a basic animation to a widget, select **Basic** from the **Animation Type** dropdown. From the **Trigger** dropdown, set the trigger for the animation. You will find two options. - **On Load** – To trigger the animation on page load. - **On Scroll** – To trigger the animation on page scroll. Select the option that matches your use case. For another type of scroll-based interactivity, see [how to add a follow image cursor in Elementor](https://theplusaddons.com/docs/add-a-follow-image-cursor-in-elementor/) using The Plus Addons for Elementor. From the **Animation Controls** section, set the animation delay, duration and offset. From the **Motion Settings** section, set the animation style, effect and direction. Enable the **Stagger Effect** toggle to add a delay between animation sequences. This is useful when you want multiple elements in a list or grid to animate one after another rather than all at once. Enable the **Repeat** toggle to repeat the animation. Based on your settings, you will see the animation. ### Use Advanced Animation To add an advanced animation to a widget, select **Advanced** from the **Animation Type** dropdown. From the **Add Frame** section, use the repeater items to create the animation. By default, you will find one repeater item; open it. In the **Item Name** field, add the repeater item name. From the **Scroll Options** section, set the scroll options. This is the most important setting; based on this, your animation will work. The following options control the scroll behavior. - **Trigger** – Set the scroll position at which the animation starts. Use this when you need the animation to begin only after the element enters the viewport rather than immediately on page load. - **Duration** – Set the animation duration. Use a longer value for subtle slow-moving parallax effects and a shorter one for quick entrance animations. - **Offset** – Set the distance from the top of the viewport when the animation begins. - **Dynamic Height** – Enable this toggle to fix height-related layout issues across all device sizes. #### Motion After that, from the **Motion** toggle, you can add different motion-based scrolling animations. - **Vertical** – Set the starting and ending vertical position. Use this for scroll-triggered slide-in effects where elements move up or down as the visitor scrolls. - **Horizontal** – Set the starting and ending horizontal position. Use this for elements that slide in from the left or right as they enter the viewport. - **Rotate** – Set the rotation position and starting and ending rotation for the X, Y, and Z axis separately. Use this for spin-on-scroll effects on icons or decorative elements. - **Scale** – Set the starting and ending scale values for the X, Y, and Z axis separately. Use this for zoom-in or zoom-out effects as elements enter the viewport. - **Skew** – Set the starting and ending skew value for the X and Y axis separately. Use this for stylized entrance animations on headings or cards. **Motion Scrolling Animation Demo** #### Appearance Then, from the **Appearance** toggle, you can add different appearance-based scrolling animations. - **Opacity** – Set the starting and ending opacity value. Use this for fade-in or fade-out effects as elements scroll into view. - **Padding** – Set the starting and ending padding value. Use this to expand or contract element spacing as the user scrolls. - **Color** – Set the starting and ending font color. Use this for color-transition effects on headings or text as they enter the viewport. - **Font Size** – Set the starting and ending font size. Use this for text that grows or shrinks on scroll. - **Letter Spacing** – Set the starting and ending letter spacing value. Use this for headline reveal effects where text expands from tight to wide as it scrolls into view. - **Text Shadow** – Set the starting and ending text shadow value. Use this to add a dramatic shadow effect to headings as they animate into place. - **Box Shadow** – Set the starting and ending box shadow value. Use this to animate card depth as elements enter the viewport. - **Border Radius** – Set the starting and ending border radius value. Use this for shape-morphing effects on images or card elements on scroll. - **Background Color** – Set the starting and ending background color. Use this to transition section or element backgrounds as the visitor scrolls through the page. **Appearance Scrolling Animation Demo** #### Visual Effect From the **Visual Effects** toggle, you can add different visual-based scrolling animations. - **Blur** – Set the starting and ending blur value. Use this for a focus-reveal effect where content sharpens as it scrolls into view. - **Grayscale** – Set the starting and ending grayscale value. Use this for a color-reveal effect where images transition from black-and-white to full color on scroll. - **Brightness** – Set the starting and ending brightness value. Use this for a light-fade effect on images or sections as they scroll into the viewport. **Visual Effect Scrolling Animation Demo** #### Advanced By enabling the **Advanced** toggle, you can add some advanced scrolling animation. ##### Play Video on Scroll From the **Play Video** section, you can play a video as you scroll. This will work with the Video Player widget from The Plus Addons for Elementor only. Add the Video Player widget from The Plus Addons for Elementor to the page. Then select **Self Hosted** from the source and add the video. > *Note: This will work with self-hosted videos only.* Then go to the **Advanced **>** GSAP Scroll Interaction** tab. Select **Advanced** from the **Animation Type** dropdown and open the repeater item. Then enable the **Advanced** toggle and open the **Play Video** settings. Copy the CSS class name without the dot from the **Video Selector (CSS)** field. You can also change the class name. Then go to the **Layout** tab and add the class name in the **CSS Classes** field to make the connection. Now, as you scroll, the video will play frame by frame. ##### Draw SVG on Scroll From the **Draw SVG** section, you can draw an SVG on scroll. This feature will work with the Draw SVG widget from The Plus Addons for Elementor only. Add the Draw SVG widget from The Plus Addons for Elementor to the page. Select the container containing the Draw SVG widget. Then go to the **Advanced **>** GSAP Scroll Interaction** tab. Select **Advanced** from the **Animation Type** dropdown. After setting the Scrolling Options, enable the **Advanced** toggle and open the **Draw SVG** settings. Copy the CSS class name without the dot from the **SVG Selector (CSS)** field. You can also change the class name. Then select the Draw SVG widget, and enable the **Connect GSAP Interaction** toggle. After that, go to the **Advanced **>** Layout** tab. Then add the class name in the **CSS Classes** field to make the connection. Now, you will see the SVG draw as you scroll. For a related scroll-based text animation, see [how to create animated rotating circle text in Elementor](https://theplusaddons.com/docs/animated-rotating-circle-text-in-elementor/) using The Plus Addons for Elementor. ##### Parallax Effect on Scroll From the **Parallax Effect** section, you can add a parallax effect on scroll. ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-advanced-parallax-effect.png) - **Horizontal Movement (X)** – Move the element along the horizontal axis. A positive value moves the element to the right and a negative value moves it to the left. - **Vertical Movement (Y)** – Move the element along the vertical axis. A positive value moves the element down and a negative value moves it up. ##### Advanced Options From the **Advanced Options** section, you can repeat the animation, add easing effects, and set timing for an existing animation. ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-advanced-advanced-options.png) - **Repeat** – Set the number of times the animation will repeat as you scroll. - **Easing** – Set an easing effect for the animation. Use this to control the acceleration curve — for example, use ease-in for animations that start slow or ease-out for effects that decelerate at the end. - **Timing** – Set the animation duration. > *Note: This will work on the animation created using the previous options mentioned above.* ##### Sticky By enabling the **Sticky** toggle, you can make the element sticky as you scroll. ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-advanced-sticky.png) From the **Z-Index** field, set a z-index value to control the stacking order of the sticky element. Use this when the sticky element needs to appear above or below other overlapping elements on the page. ##### Custom Selector From the **Custom Selector** section, you can target a specific element using its CSS class, ID, or selector name to apply the animation. > *Note: This will work on the animation created using the previous options mentioned above.* For instance, we are using the Heading Title widget from The Plus Addons for Elementor and have applied the letter spacing and color change animation on scroll. Now we want this animation to be applied to the h3 tag of the Heading Title widget only. So you have to add **h3** in the **Custom Selector** field. Now, when you scroll, the animation will be applied to the h3 tag only. ##### Developer By enabling the **Developer** toggle, you can add a custom trigger name in the **Trigger Name** field. ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-advanced-developer.png) You will now see the trigger and scroll points on the screen. Based on these, you can fine-tune your animation. These triggers help you create more precise and accurate animations. > *Note: You can apply all the animations like Motion, Appearance, Visual Effect and Advanced together on one element.* Click the **+ Add Item** button to add more repeater items to create more complex animations. From the **Visibility** field, select which responsive devices the animation will run on. Use this to disable the animation on mobile devices where scroll-triggered motion can affect page performance. ![](https://theplusaddons.com/wp-content/uploads/2026/01/gsap-scroll-interaction-advanced-add-item-visibility.png)