Cassie Posted August 23, 2021 Share Posted August 23, 2021 Looks like this might be helpful too -https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component Link to comment Share on other sites More sharing options...
dotsinspace Posted September 3, 2021 Author Share Posted September 3, 2021 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 More sharing options...
Solution GreenSock Posted September 3, 2021 Solution Share Posted September 3, 2021 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. 1 Link to comment Share on other sites More sharing options...
dotsinspace Posted September 3, 2021 Author Share Posted September 3, 2021 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 More sharing options...
GreenSock Posted September 3, 2021 Share Posted September 3, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now