---
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-14
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 añade una sección de ajustes en la pestaña Advanced de contenedores y widgets, y permite crear efectos ligados al scroll sin escribir JavaScript.
- The Plus Addons for Elementor marca GSAP Scroll Interactions como Freemium, con animaciones Basic y Global en el plugin gratis y animaciones Advanced frame en The Plus Addons for Elementor Pro.
- Basic usa un solo elemento seleccionado, con Trigger On Load u On Scroll, y por defecto Fade, Direction From Bottom, Delay 0.15, Duration 1.5 y offset 50.
- Stagger Effect anima los hijos en secuencia, con Stagger Items en Containers o Widgets y Stagger Depth Level en Child o Multi Child; el espacio entre items usa el valor Delay.
- Advanced crea varios frames por elemento y añade Motion, Appearance, Visual Effects y opciones como Sticky y Custom Selector; On Scroll se invierte al subir la página, pero On Load no se ejecuta en reversa.

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/)