Horizontal Scroller - ScrollTrigger to ensure snap to 3 child divs as user scrolls

[abernal96]

Hello World!

I am new user member of gsap so I am learning as I code! 

I have use one of the gsap horizontal scroll examples to produce the code pen I have shared, my program consists of a header div that as you scroll down you will be taken to a horizontal scroller with 3 div sections. I have written gsap code that allows the horizontal scroller to work with 3 sections, as the user scrolls down the div is snap at 100% and 100vh. 

 

My problem:

Might be a quick fix but I have been stuck on this for a bit. 

I would like to some help implementing as the user reaches the horizontal scroller, the first div should snap right away. As of now on my codepen, the first div gets ignore if you scroll too fast and it snaps to the second div. I would like to ensure the each div gets snapped to viewport as the user scrolls. Vice versa, I would like this to have as the user scrolls back up it should snap to div 3 before moving back up.

 

I have attached a simple layout for you to see what I am trying to achieve!
Any guidance will be appreciated!

 

Thank you in advance.

See the Pen RwOraLw by Alejandro-Bernal-the-builder (@Alejandro-Bernal-the-builder) on CodePen

[mvaneijgen]

Hi @abernal96 welcome to the forum!

 

Great illustration and great demo! Sharing this makes helping you a breeze, great work! A small note to start, be sure if you fork something to always update GSAP to the latest versions. In your example you'd loaded version 3.9.1 and we are currently at version 3.12.5, so if there were any bugs they would be fixed using the newest version! If you open the JS panel you get a search box and this way you can load most of the popular plugins including all GSAP plugins (even the paid once!) and below here a codepen which just always loads the latest versions of all the plugins, which I personally use to start a new project.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

This helped me understand snap, so maybe it also does you. Snap snaps to a value between 0 and 1, where 0 is the start of the ScrollTrigger and 1 the end. As you have done you can do some fancy calculations, but it is maybe also good to understand what it is doing. You can feed an array to the snap value and this helped me understand it. You want to snap to the start, end and the middle, so if you feed it an array like so [0, 0.5, 1] it would do that. If you would log the value you set now  1 / (videoSections.length - 1) you will see that this gives you the value 0.5, which means it will snap to each value with increments of 0.5, so that would also be 0, 0.5 and 1. 

 

If you want to also snap the the initial slide on page load you'll need to create another ScrollTrigger which has the trigger that starts on the top of the browser and then has the end trigger of the top of your .horizontal_container then you can set a snap value of snap: 1, which will make it snap to the end of the ScrollTrigger you've created. 

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen oNObWKN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[abernal96]

Hello @mvaneijgen,

 

Thank you for your prompt response!
I will also use the codepen you shared for my works thank you.

Your explanation helped me understand Scroll Trigger better.
I have reviewed the codepen example thank you for the comments it made it easier to understand.
 

Using your explanation, I have added some code to get the last section to snap the same when user scrolls down to it, as well if they scroll back up it should snap to div 3 inside of the horizontal container.

Here is the updated codepen

See the Pen KKYzwKE by Alejandro-Bernal-the-builder (@Alejandro-Bernal-the-builder) on CodePen

My Approach to get the Last section to work as the header section and div 1

Now what I tried to do is using a scrolltrigger that starts at the bottom of the last section, since this is where I want to snap to at the end. 

I tried:

1. Setting start at bottom bottom for Trigger as last-section div
2. Now I set end trigger as "horizontal_container" set it to top top since I want it to snap to the 3rd div as the user scrolls up

However, this approach does not seem to work.

I am seeing that I may not be placing my end trigger on the right section. 
I also reviewed the docs to see if I can use the relative prefix to get my end trigger to be set on my 3rd div.

Would there be an eaiser way to set my end trigger at the end of the horizontal conatainer? 

Thank you I hope I shared the codepen correctly.

[mvaneijgen]

I get you visually want to snap to the end of the last horizontal section, but that is the same as snapping to the "this is the last section", so that is where I would align the snapes. Same ast he frist section, snap the end and start. Hope it helps and happy tweening! 

 

See the Pen BaEKYmy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[abernal96]

Hey @mvaneijgen,

 

Thank you so much for your help this is exactly what I wanted to achieve.

 

I wanted to clarify that my understanding is correct,
I am still stump on the fact that the last section does not require a end trigger.
Is this happening because we already set a scroll end on the intitial header snap?
 

[mvaneijgen]

The endTrigger is an optional property, the trigger element is normally also the end trigger just with different values set in the end: property. But as you can see GSAP has thought of everything, so if you want a different start trigger and a different end trigger, this is all possible with the tools provided. But it is defeantly not required. 

 

Sounds boring, but I really recommend just reading the docs once. There is just so much info in there that you didnt think you even needed https://gsap.com/docs/v3/Plugins/ScrollTrigger/

[abernal96]

Howdy,

Its me again

Thank you for all your help. I had a question regarding this same topic.
Is there any Property on GSAP scroll trigger that would help me make sure that user does not just scroll through all of the content?

For example, is there a way for snap to finish before the user continues to scroll down

Here is a sample I made based on a demo I found in your forums
I used Observers for this one:

See the Pen JjVEEXr by Alejandro-Bernal-the-builder (@Alejandro-Bernal-the-builder) on CodePen

However speaking to my designer we need the horizontal scroll to follow this flow

See the Pen KKYzwKE by Alejandro-Bernal-the-builder (@Alejandro-Bernal-the-builder) on CodePen

What I have tried so far includes

1. Setting a quick setTimeOut function that disables scrolling on snap complete, however the user can still speed through the content

Any feedback you can give me would be appreciated it!

[mvaneijgen]

Observer is your best bet. Instead of ScrollTrigger where the animation is hooked to the scrollbar. The Observer plugin watches for scroll events and does logic based on that. 

 

Personally I always use a timeline with labels and then I just animate to these labels 

 

See the Pen GRzrPPy by mvaneijgen (@mvaneijgen) on CodePen

 

And here an example that mixes normal scroll with the Observer plugin, eg it releases it when the animation is done. Hope it helps and happy tweening! 

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen