The all-new Slider Tween will let you apply all of the GSAP Scrolltrigger magic you are now familiar with to your sliders, be it Gloo’s new Slider Power, or even Elementor‘s own widgets.
The Slider Tween feature enables you to create seamless website experiences where users can scroll to navigate sliders instead of using controls. This gives you greater control over user engagement and allows for more efficient division of attention and space for important information. By integrating critical content within sliders, you can ensure users see it without making pages overly long. This enhances user experience by streamlining navigation and presentation of key information. And that’s just one use case for the Slider Tween! As always with Gloo and GSAP, your imagination is the only limit.
Let’s get started.
Once the new Slider Tween is selected in the GSAP Event Type menu, we’ll have another drop-down menu from which to select the type of slider we’re working with. We will find Gloo’s amazingly versatile Slider Power in here, but the Slider Tween will work just the same with Elementor’s slider-based widgets.
If we’re planning to use a Slider Power slider, we’ll have to make sure we’ve set up a Slider Power ID in the master container where we’ve toggled on Slider Power. We can do so in the Advanced tab of the Slider Power options.
However, if we’re using any of the other compatible widgets, an unique selector like the ID of the widget will do just fine. We’ll then choose our trigger element. Inside Trigger Element we can paste the CSS ID of the Section or Container that we want to be the visual starting point of the animation as soon as it enters the viewport, or any valid class selector like .myClass, or HTML element, without a prefix. Usually, this will be the container that our slider widget is inside of.
If we’re using Slider Power, we’ll want the Trigger Element to be the container that contains the one in which we’ve toggled Slider Power on, and not the Slider Power container itself.
With the slider mapped to the GSAP Slider Tween, and the Trigger element selected, all that’s left to do is decide how the scrolling will work. This can be done by toggling on Event Scrolling, which should be toggled on by default.
We’ll then set up the Canvas options as customary with any other GSAP Tween, as outlined here in the GSAP Standard Event page. It’s advisable to go with the classic top top for the Start field and bottom bottom for the End field, with a Scrub value of 1. Remember: Scrub is defined as the connection between the animation and the mouse scrolling. Using these canvas settings will ensure all of the slides will be displayed before the trigger element goes out of the view.
It’s important to note that when working with a Slider Power slider, we must turn off the Loop option in the Common Settings in the Advanced Tab of your Slider Power options, as it’s incompatible with the GSAP Slider Tween
When working with page scrolling to control a slider, it’s of course best to make sure the user has a chance to see all the slides in it before the slider goes out of the viewport as the rest of the page scrolls into view. To do so, we should pin the slider so that it won’t scroll away until the animation (in this case displaying all sliders) finishes.
To pin a slider widget we’ll want the pin element to be the container the widget sits in. If we’re using Slider Power, here is where we’ll paste the ID of the container in which we’ve toggled on Slider Power. This is the container that directly contains all the slides we’ve designed. (i.e. the parent container) We’ll want to make sure we haven’t pinned the Slider Power ID we’ve set in the Advanced tab, which is to be used only in GSAP Slider Power ID field, or even the ID of the container that contains Slider Power that we’ve used as the Trigger Element.
In case we’re using one of the new Slider Power widgets as controls for our Power Slider, we can also pin the controls by creating a new GSAP Event and selecting the Standard Event Type, using the same Trigger Element we’ve used in the Slider Tween, targeting the ID or selector of the controls in the Target Element Field and using that same ID as the Pin Element in the Pin Settings.
However, it’s important to note that if while this is a possibility, if we’re controlling the slider with the Slider Tween it may be best to not allow the users to control using buttons or swiping, as it might result in undesirable behavior. In the case of Slider Power, that can be done by toggling off everything in the Common Settings in the Advanced tab of Slider Power.
Looking for a lifetime deal?
