Rukasu Posted June 24, 2021 Share Posted June 24, 2021 Hello guys, I can't quite figure out what's wrong with my tween, and was wondering if anyone here could help me out. The scroll animation is working as indented, but the problem is with the buttons. I'm seeing a small jump after clicking on it, most noticeable by a white flash at the bottom. Thanks in advance, Lucas See the Pen LYWKqEp by sueharaluke (@sueharaluke) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 24, 2021 Solution Share Posted June 24, 2021 Hey @Rukasu Quote Most modern browsers handle scrolling on a totally separate thread (at least scrolling of the main documentElement), so it's not synchronized with the JS thread. When you get to the spot where it's supposed to do pinning, the browser renders things as if it continued scrolling, and THEN it runs the JS thread ad ScrollTrigger says "no, pin that element and set it as position: fixed", and that's where you see the "jump". @GreenSock That explanation is taken from this thread, where you'll also find suggestions on how to workaround that. Hope that helps. 5 1 Link to comment Share on other sites More sharing options...
Rukasu Posted July 1, 2021 Author Share Posted July 1, 2021 Hello @akapowl Apologies for the extremelly late reply, had to put this project on the back burner, but was finally able to fix it. I ended up using a variation of Jacks approach. Quote You could simply ensure that your initial snapping position is actually SLIGHTLY past where the pinning occurs so that you avoid that whole "going from unpinned to pinned" tricky spot when you need to scroll elsewhere. But instead of tweaking the snapping, I added a cheeky 10px on the scrollTo position, which madee the jump disappear. Here's the fixed pen, for anyone who might have this problem in the future. See the Pen poPJypw by sueharaluke (@sueharaluke) on CodePen Thanks for the help ! 2 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