Jump to content
Search Community

Horizontal Snap - SCROLLTRIGGER

serotoninene test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...