[ScrollTrigger: between two scenes, snap to the nearest scene]

@akapowl Thanks for the helpful comments!

[ScrollTrigger: between two scenes, snap to the nearest scene]

@akapowl Many thanks for your answer and the workaround for an issue I've not even think about! I have some further questions:

1.  You used end: "max" in the extra ScrollTrigger, but I didn't find max documented, is that an accepted value ?
2. The two states thing is due to the .from method + an implicit .to method (which set every property to the default value, e.g. scale: 1) along with pin: true , thus making the height twice as it would be without pin: true , right ?

Thanks.

[ScrollTrigger: between two scenes, snap to the nearest scene]

Hello,

 

I just made my first steps with gsap + ScrollTrigger, but have struggled to snap to the nearest scene when two scenes are visible (see the pen in the end). That's not something unexpected, as I looped over the scenes and assigned them a snap value 1. But all the variants I tried failed (see the snapTo: 1 / (scenes.length - 1) approach:  

See the Pen mdMbadp by firmart (@firmart) on CodePen

 and the snapTo: "labels" approach: 

See the Pen YzxKdgO by firmart (@firmart) on CodePen

).  I'm aware of the given examples

1. See the Pen YzyaKrq by GreenSock (@GreenSock) on CodePen

2. See the Pen XWmEoNg by GreenSock (@GreenSock) on CodePen

But the former seems to rely on the CSS properties scroll-snap-typeandscroll-snap-align(I believe that it can be done with gsap alone)  and the latter has a hardcoded width (not sure whether it's relevant).

 

How can I snap to the nearest scene (upper scene's end or lower scene's beginning) when the scroller is between two scenes ?

 

Thanks

See the Pen oNeveJy by firmart (@firmart) on CodePen