Snap with horizontal ScrollTrigger

[chailandau]

Hello! I got horizontal scrolling working with ScrollTrigger. Is there a way to have it snap to each div? I tried inputting snap: "content-wrapper" but it just shot up to the page beginning when it hit it. I don't quite understand how snap works - I took it from one of the demos. I can't really find docs on it.

See the Pen WNoeNMm by cliquechicago (@cliquechicago) on CodePen

[ZachSaucier]

1 hour ago, chailandau said:

I can't really find docs on it.

It's in the main ScrollTrigger page under "Usage & special properties" next to the snap property. 

 

But the biggest issue is that you are trying to use an exact end value. But depending on the screen size that could be before the start, so when you reach the ScrollTrigger it completes it all at once! That's no good. It's actually a variation of one of the most common ScrollTrigger mistakes. I think you want to use += instead.

 

Additionally, your transform value is off because your horizontal-scroll element's width is not wide enough to hold all of the content. You should probably size it to where it is wide enough to fit all of the child contents. Then you can animate it by its total width minus the width of the container.

 

As for the snap value, it's not really clear where you want it to snap. If you use a value like 1/4 it works but perhaps not like you're imagining it would because of how your elements are not centered themselves:

See the Pen LYbPGeJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[chailandau]

Thanks for the link to the docs! I want to snap to the beginning of each element, even though they are not centered, is this possible? Gotcha on the width of the container, I will update that as well.

[ZachSaucier]

54 minutes ago, chailandau said:

I want to snap to the beginning of each element

What do you mean by this? Snapping to where the left most edge of an element is to the left most edge of the viewport? The left most edge of an element is to the left most edge of the container? Something else? 

 

In any case you'll have to calculate the snap values dynamically. You won't have the same number of snaps each time because depending on your screen width some of the sections will never reach the left most side of the viewport or container. See the difficulty? 

[chailandau]

Yes, I meant the left edge of the element to the left edge of the container. I do understand why that would be difficult. Would it help if the containers were pre-determined widths? The snapping functionality I am thinking of would work sort of like this:

See the Pen LYVygxW by nrifki (@nrifki) on CodePen

 

Is this possible using ScrollTrigger?

[ZachSaucier]

1 hour ago, chailandau said:

Would it help if the containers were pre-determined widths?

Sure, it'd make the calculations a little easier. But the main issue is that the progress value of where to snap is not the most simple to calculate. Here's one way of doing it that works in the case of your minimal demo:

See the Pen QWGLKYG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that this aligns the start to the start of the container, not the viewport.