GSAP ScrollTrigger Connector

Unleash GSAP’s JS scrolling animation power without coding, with Interactor.

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

This is why we’ve chosen it over other libraries to create the GSAP ScrollTrigger Connector for Interactor. This Interactor extension, once toggled on, will allow us to create GSAP ScrollTrigger animation events using nothing more than the Interactor UI.

Not only that, but we get the added benefit of having other Interactor functionalities integrated with the animation building process. This means we can precisely set triggers to decide what exactly causes our animation to happen.

Create your animation.

The GSAP ScrollTrigger Connector features a vast range of settings we can use to fine-tune our scrolling animation. We will find a toggle after the Interactor events which will enable GSAP. We will then be able to add a new GSAP event.

Set the target element using the ID, CSS class or HTML, and we will then be able to transform and scale the element to our heart’s content. We can also select from a large list of easing animations via the special menu.

We can also set a stagger value to create staggered animations which will work on multiple elements. By adjusting the value, we’ll be making each subsequent element finish its animation later than the first according to the chosen value. This creates a so-called stagger effect.

Timeline controls and Timeline scrolling parameters.

When working with multiple elements, you could create a trigger for each new element you add in the GSAP Events repeater, and set delays and duration for each of them to fire in a specific order.

We can otherwise use the Timeline option to fire all our events one after another as their durations become relative to the overall Timeline duration, and their delays relative to the timeline start.

The timeline options will then dictate the delays between the animations. The settings found in Scrolling Parameters will let us map the Timeline to the global scrolling value as well.

Not just simple scrolling animations.

By toggling on Event Scrolling, we will have access to the options to really obtain the result we’re looking for. This is the heart of the JS scrolling animation, as we’ll be able to set the trigger element which will start the animation regardless of its position on page load.

Scrub is defined as the connection between the animation and the mouse scrolling. The Scrub field lets us set a value to specify this connection. The unit of the value is in seconds, and an higher value represents more delicate scrubbing. Without a scrub value, animations fire by duration and delay. We can also use the pin option to pin the animated element to a position in the page.

The Toggle Actions section of the GSAP event builder will allow us to select what happens to the animation on certain user actions, via a drop-down menu.

Last but not least we can enable guides to show us exactly where the animation starts and ends on the page.

Connecting the animation to a trigger.

With the animation built, Interactor’s specialty comes back into play. We’ve completely built the animation without writing even a single line of code, so it’s time to choose when to trigger it by doing the same.

We can choose a multitude of triggers that will fit us according to the outcome we’re trying to achieve. We can make sure the animation loads and starts regardless of user input, by selecting Ready as a trigger, or we can make sure the animation only happens once the user has begun scrolling or even clicked any element on the page.

The GSAP ScrollTrigger Connector is currently in its alpha phase, which indicates that unexpected behavior may occur, and both its user interface and functionalities are subject to continuous development and change. We appreciate your feedback to help us enhance this tool into an even more powerful asset, leading up to its full release.