GSAP ScrollTrigger

All The Scrolling Power GSAP Has To Offer Now Integrated Into Your Elementor Workflow. Animate Like Never Before.

watch the GSAP ScrollTrigger tutorial

Play Video

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

Scope : Extension
Dependencies: Elementor

Frequently Asked Questions

GSAP ScrollTrigger is a feature within the Power Gloo extension for Elementor that enables the creation of sophisticated scrolling animations without coding. Once activated, it appears in the Page Settings under the Interactor menu. It’s essential to have Interactor enabled in the Gloo settings dashboard for ScrollTrigger to function. This tool allows users to set up animations (tweens) that respond to scroll events, with options to control the timeline, duration, delay, easing, and specific actions like play, pause, or reverse. GSAP ScrollTrigger is particularly useful for creating dynamic, interactive web pages where animations are triggered by the user’s scroll actions.
Choose the Function: Select ‘To’ or ‘From’ to define whether the animation moves towards or starts from the specified values. Set the Trigger Element: Paste the CSS ID of the section or container that marks the start of the animation. Define the Target: Identify the element to animate by its CSS ID, including the ‘#’ symbol. Use Attach Scene for 3D Objects: If animating 3D objects, use this option in conjunction with the 3D Model Widget. Show Markers: Enable this to visualize the start and end points of the animation. Adjust Canvas Settings: Define the animation’s start and end points relative to the viewport, and set the scrub value for smoothness. Customize Transformations: Use the Transformation menu to modify the target element’s position, scale, rotation, and opacity. Apply Easing and Stagger Effects: Select from various easing functions and set stagger values for multi-element animations. By following these steps, users can create custom, scroll-triggered animations that enhance the user experience on their web pages.
Managing multiple tweens in Elementor while maintaining performance involves: Chaining Tweens: Understand that each tween is an independent animation of a single object. You can animate different elements simultaneously or in sequence by adjusting individual canvas settings for each tween. Setting Start and End Positions: Carefully manage the start and end positions for each tween to ensure a coherent flow and adequate delays between animations. Disabling Auto Update: In cases where the Elementor editor becomes slow due to multiple animations, use the ‘Disable Auto Update’ toggle found in the GSAP options. This improves performance but requires manual refreshing to see updates in the action selector events in Interactor. By strategically organizing tweens and utilizing performance-enhancing features, users can create complex, interactive animations without compromising the editor’s responsiveness.

THIS FEATURE IS PART OF :

Explore The SCROLL

Scrolling is now a super power

The GSAP Scroll Trigger is one of the most powerful tools in web animation. It allows for seamless, visually stunning transitions that captivate audiences and help businesses stand out from the competition. With the introduction of the Gloo plugin, utilizing the GSAP Scroll Trigger is now easier than ever before.

Control is yours

3D, Video scrolling, Split Text and SVG Drawing

Gloo enables non-developers to take advantage of the power of Scroll Trigger without having to write any code. With just a few clicks, designers can bring their web pages to life, creating beautiful animations that will keep users engaged and coming back for more. Gloo will revolutionized the way designers and businesses approach web animation, making it more accessible and user-friendly than ever before.

Power Gloo
Power Gloo
Play Video

How to draw SVG strokes as you scroll with GSAP Line Drawing

Play Video

How to Animate Individual Text Letters, Words and Lines in Elementor

Play Video

Animate and stagger Elementor items at will with GSAP Scrolltrigger

Play Video

Animated 3D Models in Elementor Pages with the 3D Model Widget

Play Video

Visualize 3D space in Elementor with the Axes Helper

Play Video

How to pin elements in Elementor GSAP Animations

Play Video

Play videos by scrolling with GSAP Video Scrolling for Elementor

How to set up GSAP Scrolltrigger animations in Elementor

Play Video

How to draw SVG strokes as you scroll with GSAP Line Drawing

Play Video

How to Animate Individual Text Letters, Words and Lines in Elementor

Play Video

Animate and stagger Elementor items at will with GSAP Scrolltrigger

Play Video

Animated 3D Models in Elementor Pages with the 3D Model Widget

Play Video

Visualize 3D space in Elementor with the Axes Helper

Play Video

How to pin elements in Elementor GSAP Animations

Play Video

Play videos by scrolling with GSAP Video Scrolling for Elementor

How to set up GSAP Scrolltrigger animations in Elementor

Lets Step Outside and talk for a minute...

NATURE

Cool, Right ?