GSAP ScrollTrigger

Animate anything.

GSAP is a JavaScript library that allows for unprecedented flexibility, speed and performance when it comes to web animations.

The GSAP ScrollTrigger extension, once toggled on, will allow us to create GSAP ScrollTrigger animation events using nothing more than the Elementor Editor, letting us work with different events to achieve stunning visual effects that can be mapped to the scrolling space of the page, or play altogether as soon as the targeted element appears on page.

All of this without writing a single line of code and just by working within the Elementor UI. 

Animate entire widgets, singular text elements down to the lines, words and letters, map video playback to page scrolling, and even use 3D Models on your Elementor pages, and animate them too with GSAP. Elementor has never been a better tool for web designers.

We will find GSAP ScrollTrigger in Power Gloo, and after toggling it on, it will appear in the Page Settings of your Elementor page, in the Interactor menu. It’s important to note that Interactor needs to be toggled on in the Gloo settings dashboard too for GSAP ScrollTrigger to work.

GSAP Events (Tweens)

This is the core of the GSAP ScrollTrigger, as this is where we define individual animations and chain them together using the repeater.

The Event Type will define what we will be able to do when using GSAP.

• Standard Event

The Standard Event type will let us target and animate Elementor widgets, elements and any item that we may target using unique selectors, and apply animations to each allowing us to modify their scale, positioning, rotation, and other values we can define in the transformation options. These changes will play along with the page scrolling if scrubbing is enabled.

• Split Text

GSAP Split Text allows us to split any amount of text by lines, words, or even characters, and then control those individual split elements and apply all the previous GSAP transformations and even change CSS parameters for every element we’ve split the text into.

• Line Drawing

Line Drawing can be used in conjunction with any SVG file with a stroke, and when set up correctly, will make sure that the stroke of that same SVG will fill in or fill out as the user scrolls the page, making it look like the SVG is being drawn in real time.

• 3D-Model

This event type, when used in conjunction with the 3D Model Widget, lets us animate specific properties of our 3D models directly within the Elementor editor: position, scaling, even lighting color and effects. Elementor enters the 3rd dimension.

• Elementor Video

With the Elementor Video event type we can map video playback to user scrolling. This means that with some imagination and clever usage of a chosen video, you can now create a section containing a self hosted video which will play only as long as the user is scrolling through the page.

• GSAP Slider Tween

With the GSAP Slider Tween we can now control sliders with page scrolling. Doesn’t matter if we’re using Gloo’s own Slider Power or Elementor’s Slider-based Widgets, all of them can come to life without needing to use manual controls.

• GSAP Custom Tween

With GSAP Custom Tween, you can write your own JavaScript to create your own Custom Tween, just as the name suggests.

All event types can be used together on any page to achieve extremely powerful visuals that are sure to draw in all who will see them. 

Warning: While Gloo for Elementor does not affect site speed by default, activating and misusing features or creating complex designs with tools like Interactor and Fluid Logic can. Please enable features carefully and test your site extensively.