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 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 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
How to Activate the GSAP Scroll Interaction Extension?
Go to
- The Plus Addons → Extensions
- Search the extension name and turn on the toggle.
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.
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 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 using The Plus Addons for Elementor.
Parallax Effect on Scroll
From the Parallax Effect section, you can add a parallax effect on scroll.
- 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.
- 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.
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.
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.
