An element that fades up as it comes into view, a card that scales while you scroll, a panel that stays pinned until the next section arrives — all of that is animation tied to the scrollbar rather than to a click.
GSAP Scroll Interactions is an extension in The Plus Addons for Elementor. It adds a settings section to the Advanced tab of your containers and widgets, so you can build those effects without writing any JavaScript.
Requirement – This extension is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: the extension is tagged Freemium. Basic and Global animations are in the free plugin and behave identically with Pro installed; Advanced frame animations need The Plus Addons for Elementor Pro.
- Extension to enable: GSAP Scroll Interactions, in the Plus Special group under The Plus Addons > Extensions. It is off until you turn it on.
- Status: the panel section is named GSAP Scroll Interactions (Beta) and the dashboard card carries a BETA badge, so settings and behaviour can still change.
- Elementor (free) installed and activated.
- A page with something worth animating on it, such as a row of cards or a hero section.
Turn On the Extension
- In your WordPress dashboard, go to The Plus Addons > Extensions.
- Find GSAP Scroll Interactions in the Plus Special group, or type GSAP in the search box.
- Turn its toggle on. The extension is off until you switch it on.
Where the Settings Are
Select a container or a widget, open the Advanced tab and look for the GSAP Scroll Interactions (Beta) section. The first setting, Animation Type, decides which of the other settings you see.
| Animation Type | What it does | Edition |
|---|---|---|
| None | The default. Nothing is added to the page and the GSAP scripts are not loaded. | — |
| Global | Reuses an animation you saved once in Site Settings. | Free |
| Basic | One entrance animation with a handful of settings. | Free |
| Advanced | Frame-by-frame effects tied to the scroll position, with motion, appearance and visual effects. | Pro |
Build a Basic Animation
Set Animation Type to Basic. This is the free option, and it gives one animation that runs on the element you selected.
- Pick a Trigger. On Load (the default) plays the animation as soon as the page opens. On Scroll waits until the element reaches the middle of the screen.
- Open the Animation Controls popover to set Delay, Duration and offset — how long it waits, how long it runs, and how far away it starts in pixels.
- Open the Motion Settings popover to choose the Style, the easing Effect and the Direction the element moves from.
Style is the part people most often get wrong. Only Fade changes opacity. Slide moves the element without fading it, and Scale grows it from half size without fading it, so with those two the element is fully visible before it starts moving.
| Setting | What it does | Default |
|---|---|---|
| Trigger | On Load runs the animation at page load; On Scroll waits until the top of the element reaches the middle of the screen. | On Load |
| Delay | Seconds to wait before the animation starts. It is also the gap between items when Stagger Effect is on. | 0.15 |
| Duration | Seconds the animation runs for. A value of 0 is ignored. | 1.5 |
| offset | How far away, in pixels, the element starts. A value of 0 is ignored. | 50 |
| Style | Fade changes opacity and position; Slide and Scale change position or size only. | Fade |
| Effect | The easing curve, from Power1 Out through to Bounce Out. | Power1 Out |
| Direction | Which side the element travels from. The four arrows are From Top, From Bottom, From Left and From Right. | From Bottom |
| Repeat | Plays the animation forwards and backwards on a loop that never stops. | Off |
With the defaults the element fades in and rises 50 px into place, finishing about 1.7 seconds after the page loads.
Animate Items One After Another
Turn on Stagger Effect to animate the children of the element in sequence instead of moving the whole block at once. Two more settings appear.
- Stagger Items — Containers (the default) animates the inner containers, Widgets animates the widgets.
- Stagger Depth Level — Child only reaches items that sit directly inside the element, Multi Child also reaches items nested deeper.
- The gap between items is the Delay value from Animation Controls. There is no separate stagger amount.
In a normal card layout the widgets sit inside inner containers, so Widgets with Child matches nothing and nothing animates. Use Multi Child for widgets, or leave Containers selected and animate the cards.
Repeat the Animation
Repeat makes the animation run forwards and backwards on a loop for as long as the page is open. There is no setting for a number of repeats, so use it only for decorative elements.
Reuse a Saved Animation
Set Animation Type to Global and pick an entry from the Global Animation dropdown. The dropdown is filled from Site Settings > Global Scroll Interactions, so you have to create the animation there first. Both steps are covered in the global GSAP animation guide.
If an animation you just saved is missing from the dropdown, save the page and reload the editor. The list is built when the panel loads.
Build an Advanced Animation (Pro)
Set Animation Type to Advanced to tie the effect to the scroll position instead of playing it once. In the free plugin this option only shows an upgrade notice and nothing is added to the page.
With Pro you get an Add Frame repeater. Each frame is one effect, with its own Trigger (On Scroll, On Load or On Hover) and Item Name. You can add several frames to one element and they all run together.
Scroll Options
Scroll Options decides where the effect starts and how much scrolling it takes. It is hidden when the frame Trigger is On Load or On Hover.
- Trigger — the point on screen where the effect begins, from 0 (top of the viewport) to 1 (bottom). The default 0.5 is the middle of the screen. A higher value starts it earlier.
- Duration — how many pixels of scrolling the effect is spread over.
- Offset — shifts the starting point.
- Dynamic Height — a switch with a Reference Height (px) field below it.
Motion
The Motion group moves and transforms the element as you scroll. Each effect has a start and an end value, and the element sits between them according to how far you have scrolled.
- Vertical and Horizontal — move the element up, down, left or right.
- Rotate — rotate on the X, Y and Z axes, with Position, Preserve 3D and Perspective.
- Scale — grow or shrink on the X, Y and Z axes.
- Skew — slant the element on the X and Y axes.
Scroll back up and the element runs the effect in reverse, so the page reads the same in both directions.
Appearance
The Appearance group animates the element’s look: Opacity, Padding, Color, Width, Border Color, Height, Font Size, Letter Spacing, Text Shadow, Box Shadow, Border Radius and Background Color. Each one takes a start and an end value.
Opacity is the one to reach for when you want content to reveal itself rather than move.
Visual Effects
Blur, Grayscale and Brightness each take a start and an end value and are applied to the widgets inside the element, not to the element’s own background.
A Grayscale frame that runs from 100 to 0 leaves the content grey until you scroll to it, then brings the colour back as you continue.
Brightness Start (%) and Brightness End (%) are added on top of 100%. A start value of 30 renders the content at 130% brightness, and 100 renders it at 200%.
Advanced Effects
The Advanced group holds the effects that work with another element on the page.
Play Video scrubs a video as you scroll. It is built for the Video Player widget from The Plus Addons with a self-hosted file: copy the class from Video Selector (CSS) without the leading dot and add it to that widget’s CSS Classes field.
The recording below shows the effect on a finished page. This combination was not re-tested for this guide, so check it on your own page before you rely on it.
Draw SVG works the same way with the Draw SVG widget from The Plus Addons: copy the class from SVG Selector (CSS), turn on that widget’s Connect GSAP Interaction switch and add the class to its CSS Classes field.
As with Play Video, this pairing depends on the other widget being set up correctly; the recording below shows it working on a finished page.
The group also holds MotionPath, 3D Rotate and a Parallax Effect. Parallax only appears when the frame’s Trigger is set to On Hover; it takes a Horizontal Movement and a Vertical Movement value.
Advanced Options, Sticky and Custom Selector
Advanced Options fine-tunes a frame you have already set up: Repeat, Duration, Easing and Timing.
Sticky pins the element while the rest of the page scrolls past it, and releases it at the end of the frame. A Z-Index field controls what it sits above.
Custom Selector narrows the frame to part of the element. Put a CSS selector in the box and only matching items animate — everything else in the container stays still.
Here the animation reaches the heading alone rather than the whole card.
Developer Options and Visibility
Developer Options holds GSAP Timeline, Advanced GSAP Timeline and a Trigger Name field for naming the frame while you build it.
Visibility, at the bottom of the section, decides which devices the animation runs on. All three are selected by default; clear Mobile and the animation is skipped on phones.
How It Behaves
- Basic and Global work the same in the free plugin and with Pro installed. Advanced needs Pro.
- With Trigger set to On Scroll, the animation plays when the top of the element reaches the middle of the screen, and plays in reverse when you scroll back up, every time.
- An Advanced frame is tied to the scrollbar: scroll halfway through it and the effect is halfway through too. Frames with the Trigger set to On Load do not run in reverse.
- Several frames on one element all apply at once, so you can move, fade and blur in a single pass.
- The GSAP scripts are only added to a page that actually uses the extension.
Limitations
- An element near the bottom of the page may never animate with On Scroll. If the page cannot scroll far enough for the element’s top to reach the middle of the screen, it stays invisible. Add content below it, or use On Load.
- A value of 0 is ignored. Setting offset to 0 still moves the element 50 px, and setting Duration to 0 still takes about 1.2 seconds.
- Slide and Scale never fade. The element is fully visible before it starts moving, which can look wrong for an entrance animation. Use Fade if you want it to appear.
- Repeat never stops. It loops forwards and backwards for as long as the page is open, and there is no way to limit the number of repeats in Basic.
- Stagger has no amount of its own. The gap between items is the Delay value, so changing the delay also changes the rhythm.
- Stagger Items set to Widgets with Stagger Depth Level set to Child often matches nothing, because widgets normally sit inside inner containers rather than directly in the element you set the animation on.
- Visual Effects are applied to the widgets inside the element, so the element’s own background is not blurred or greyed with them.
- Brightness is measured on top of 100%, so a value of 100 doubles the brightness rather than leaving it unchanged.
- Parallax Effect is only available on hover. The setting disappears as soon as the frame’s Trigger is On Scroll or On Load.
- The section is marked Beta, so settings and behaviour can still change between releases.
Troubleshooting
Nothing animates on the published page
Check that GSAP Scroll Interactions is switched on under The Plus Addons > Extensions, and that Animation Type is not left on None. If you are on the free plugin, Advanced does nothing at all — choose Basic instead.
The editor looks different from the live page
Always judge the animation on the published page. Preview or open the page as a visitor rather than relying on the editor canvas.
The element sits there and never appears
This is the On Scroll trigger on an element too close to the bottom of the page. Switch Trigger to On Load, or add a section below it so the page can scroll further.
Stagger does nothing
Set Stagger Items to Containers, or set Stagger Depth Level to Multi Child so the setting can reach widgets nested inside your cards.
The animation plays but the element never fades
Open Motion Settings and set Style to Fade. Slide and Scale only move or resize the element.
