Jump to content


Unexpected Bump on Scroll

Go to solution Solved by GreenSock,

Recommended Posts

  • 2 weeks later...

Guys why snap is not working when ever i scroll last page get snapped every time, instead of middle one in same example we are discussing.


See the Pen vYZKwvM by dotsinspace (@dotsinspace) on CodePen


NOTE: i am looking for dynamic solution. current code of gsap is dynamic independent of width of window. it just calulates total page in #ScrollContainer and slide accordingly. i have already tried adding snap: { x: [0, 100] } etc. but nothing works perfect. along with it have one more doubt ( not question ) is it possible to add smoothness to vertical scroll like what horizontal scroll have. because horizontal scroll look nice but when last page starts vertical scroll everything seems ugly.

Link to comment
Share on other sites

  • Solution

If you have 3 sections, you'd snap: snap: [0, 0.5, 1]. And I'd strongly recommend changing your ease to "none" on that to ensure the spacing is correct. I also think you're making the end too much - I'd cut that in half or 1/3rd but that's just my opinion. As for adding a smooth scroll to the whole page, there are several solutions offered (including a ScrollTrigger-only one) on this page: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() (scroll down for the demos). If you do apply smooth scrolling to the whole page, I would definitely set your scrub to true instead of a numeric value so that you're not compounding the smoothing. 

  • Like 1
Link to comment
Share on other sites

One more question as you can see in code pen when horizontal scroll page ends on last page in this case ( 3rd Page ) and Vertical Scroll starts my every user see little bump before vertical scroll begins how can i avoid it.

Link to comment
Share on other sites

I think that's because you have a CSS transition applied of transition: all 0.3s - you should pretty much NEVER apply a CSS transition to something that is also being animated via JS. :)

  • 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.