Scrolltrigger snap - how does it work ?

[oligsap]

Hi,

 

I'm having trouble getting scrolltrigger snap to work. I understand when you have div/sections that are the same width/height that its 1 / total - 1. But what happens when the sections are not the same width. I made a codepen to illustrate how I think it works building an array of snap points - obviously I'm wrong but I can't figure out why.

 

Help appreciated. Thanks !

See the Pen BarMpWR by olig (@olig) on CodePen

[GreenSock]

It looks like just some of your math was off. 

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

 

Is that what you wanted? 

[oligsap]

Hi Jack @GreenSock, yes that's exactly what I wanted. Thank you very much.

 

I'm confused, I really thought the snap breakpoints had to go from 0 to 1. It's written no where in the docs that breakpoints can be higher than 1.

 

I thought the snap was related to the progress of the scrolltrigger tween and I can't understand the math and what it is in relation with. Can you point this out please ?

 

Thank you

Olivier

[GreenSock]

Yes, it is supposed to be values between 0 and 1 but the way you set your stuff up had one extra snapping point after the end (but it looks like you can just remove that).