Horizontal Snap - SCROLLTRIGGER

[serotoninene]

Hello ! 
 

I'm trying to set up a snap effect that would redirect the scroll toward the start of the horizontal panels but getting really poor results so far, the scroll stops in betwen two panels... 

I'm also really intrigued by the progress of the scrollTrigger : it's around 0.13 when we get to the second panel, then 0.30 for the third, 0.50 for the fourth and 1 when we get to the last ... why isn't it 0.25, 0.5, 0.75 and 1 ? 

Made a very simple codepen so you can see for yourselves. Please enlighten me I can't seem to find the answer 🙏

See the Pen dywVZME by serotoninene (@serotoninene) on CodePen

[GreenSock]

That's because you've got the default ease on the animation of  "power1.out", so when you snap to perfect 1/3rd increments, it's not linear. For example, halfway through the tween, the actual movement of the element might be more like 85% because the easing smooths out at the end.

 

Set it to ease: "none" to make sure the mapping is linear. 

 

I assume you meant to do this?: 

See the Pen VwqMrVv?editors=0110 by GreenSock (@GreenSock) on CodePen

[serotoninene]

Of course ! Thank you so much that explains everything !

That's perfect !