---
title: "How to Use GSAP Animation in Elementor?"
url: https://theplusaddons.com/docs/use-gsap-animation-in-elementor/
date: 2026-01-06
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Use-GSAP-Animation-in-Elementor-1024x538.jpg
word_count: 2145
---

# How to Use GSAP Animation in Elementor?

## 

- GSAP Scroll Interactions adds a settings section to the Advanced tab of containers and widgets, so animations work without writing any JavaScript.
- The extension is tagged Freemium, with Basic and Global animations in the free plugin and Advanced frame animations available in The Plus Addons for Elementor Pro.
- Basic animation uses Trigger, Delay, Duration, offset, Style, Effect, Direction, and Repeat, and the defaults make the element fade in and rise 50 px into place.
- Stagger Effect animates children in sequence, with Stagger Items set to Containers or Widgets and Stagger Depth Level set to Child or Multi Child.
- Advanced animation adds frames tied to scroll position, with Scroll Options, Motion, Appearance, Visual Effects, Sticky, Custom Selector, and device Visibility controls.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/pricing/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![The Plus Addons Extensions screen with the GSAP Scroll Interactions card found by search and its toggle turned on](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-extensions.webp)

## 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.

![Elementor Advanced tab with the GSAP Scroll Interactions (Beta) section open and the Animation Type dropdown outlined](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-animation-type.webp)

| 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.

![The Trigger dropdown of the GSAP Scroll Interactions section showing On Load and On Scroll](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-basic-trigger.webp)

![The Animation Controls popover with Delay 0.15, Duration 1.5 and offset 50](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-basic-controls.webp)

**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.

![The Motion Settings popover with Style, Effect and the four Direction arrows](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-basic-motion.webp)

| 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.

![Three pricing cards part-way through a Basic fade animation, still slightly transparent](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-result-basic-mid.webp)

![The same three pricing cards after the Basic animation has finished, fully opaque and in place](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-result-basic-end.webp)

## 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.

![The Stagger Effect switch turned on with Stagger Items and Stagger Depth Level below it](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-basic-stagger.webp)

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.

![Three cards mid-stagger: the first is in place, the second is half faded in and lower, the third is barely visible](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-result-stagger-mid.webp)

### 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.

![The Repeat switch of the GSAP Scroll Interactions section turned on](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-basic-repeat.webp)

## 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](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/).

![The Animation Type dropdown set to Global with a saved animation chosen in Global Animation](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-global-select.webp)

> *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.

![The free plugin showing an upgrade notice when Animation Type is set to Advanced](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-free-advanced-notice.webp)

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.

![The Add Frame repeater of a Pro Advanced animation with the frame Trigger dropdown outlined](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-frame.webp)

### 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.

![The Scroll Options popover with the Trigger slider, Duration, Offset and Dynamic Height](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-scroll-options.webp)

### 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.

![The Vertical popover of a Motion frame with Start and End values](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-vertical.webp)

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.

![The Color popover of an Appearance frame with Color Start and Color End](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-color.webp)

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.

![The Blur popover of a Visual Effects frame with Blur Value Start and Blur Value End](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-blur.webp)

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.

![Three pricing cards rendered fully grey at the start of a Grayscale frame](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-result-adv-grayscale-start.webp)

![The same three cards in full colour once the Grayscale frame has finished](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-result-adv-grayscale-end.webp)

> ***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 Play Video popover with the Video Selector (CSS) field](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-playvideo.webp)

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.

![The Draw SVG popover with the SVG Selector (CSS) field](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-drawsvg.webp)

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.

![The Parallax Effect popover with Horizontal Movement and Vertical Movement, shown on a frame whose Trigger is On Hover](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-parallax.webp)

### Advanced Options, Sticky and Custom Selector

**Advanced Options** fine-tunes a frame you have already set up: **Repeat**, **Duration**, **Easing** and **Timing**.

![The Advanced Options popover with Repeat, Duration, Easing and Timing](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-options.webp)

**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.

![The Sticky switch turned on with the Z-Index field below it](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-sticky.webp)

**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.

![The Custom Selector box of an Advanced frame with a selector typed into it](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-selector.webp)

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.

![The Developer Options popover with GSAP Timeline, Advanced GSAP Timeline and Trigger Name](https://theplusaddons.com/wp-content/uploads/2026/09/gsap-adv-developer.webp)

**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.

## Related Docs

- [How to Add Global GSAP Animation in Elementor?](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/)- [How to Add a Follow Image Cursor in Elementor?](https://theplusaddons.com/docs/add-a-follow-image-cursor-in-elementor/)- [How to Create Animated Rotating Circle Text in Elementor?](https://theplusaddons.com/docs/animated-rotating-circle-text-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t GSAP Scroll Interactions animating on my published page?**
A: The usual failure points are simple: GSAP Scroll Interactions has to be switched on under The Plus Addons > Extensions, and Animation Type cannot stay on None. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also treats Advanced as a Pro-only option, so the free plugin will not animate that mode. If you want a quick sanity check, Basic is the safest test because it runs one entrance animation on the selected element.

**Q: What do I need before using GSAP animation in Elementor?**
A: The setup depends on three basics: The Plus Addons for Elementor must be installed and activated, Elementor free must be installed and activated, and the page needs something worth animating such as a row of cards or a hero section. The extension is tagged Freemium, so Basic and Global animations are available in the free plugin, while Advanced frame animations need The Plus Addons for Elementor Pro. That split matters because it changes what you can expect before you start building.

**Q: What’s the difference between Basic, Global, and Advanced animation?**
A: Basic gives one entrance animation on the selected element. Global reuses an animation saved in Site Settings > Global Scroll Interactions, so it is meant for consistency across pages. Advanced ties effects to scroll position and adds frame-based control like motion, appearance, visual effects, sticky behavior, and custom selectors. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps Basic and Global working the same in free and Pro, while Advanced needs Pro.

**Q: Why does my element stay invisible when I use On Scroll?**
A: That usually happens when the element sits too close to the bottom of the page. On Scroll only plays when the top of the element reaches the middle of the screen, so if the page cannot scroll far enough, the animation never gets its trigger point. The practical fix is to add content below it or switch Trigger to On Load. That matters most for footer-adjacent sections and short pages.

**Q: How do I make widgets animate one after another instead of all at once?**
A: Stagger Effect is what creates that sequence. It animates children in order instead of moving the whole block together, and the gap between items comes from the Delay value in Animation Controls rather than a separate stagger amount. For normal card layouts, Widgets with Child often matches nothing because widgets usually sit inside inner containers. In that case Multi Child reaches deeper nested widgets, or you can leave Containers selected and animate the cards themselves.

**Q: Can GSAP Scroll Interactions target only part of an element or work with videos and SVGs?**
A: The Advanced group is built for that kind of targeted setup. Play Video scrubs a video as you scroll when used with The Plus Addons Video Player widget and a self-hosted file, while Draw SVG works with the Draw SVG widget after you copy its selector class and enable Connect GSAP Interaction. Custom Selector also narrows a frame to matching items inside an element, so only those items animate while everything else stays still.