vdev Posted March 20, 2022 Share Posted March 20, 2022 I am trying to make the navigation work in the kind of scrolling behavior as shown in the codepen, but could not figure any way of doing so. Can you please suggest me a way to do so ? Thank You. See the Pen MWreKmO by vasudevsall (@vasudevsall) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted March 20, 2022 Share Posted March 20, 2022 Hey there! The demos collection is really helpful when you get stuck with scrollTrigger - https://greensock.com/st-demos/ this one looks like what you need! See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
vdev Posted March 20, 2022 Author Share Posted March 20, 2022 Thank You so much @Cassie! 1 Link to comment Share on other sites More sharing options...
HeatherMA Posted November 10, 2022 Share Posted November 10, 2022 hi, hope it's ok to tag onto the end of this. I am using the example above but have noticed there is a weird glitch when navigating from the first horizontal panel to any other panel after it (a white section appears briefly at the bottom) AND when navigating from panel 5 to any before (a white section appears briefly at the top). I have tried playing around with the css etc but get rid of it. Any idea what is causing this? Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted November 10, 2022 Share Posted November 10, 2022 Hi @HeatherMA, Can you be a bit more specific about what browser and OS you are seeing this? I tested in the latest Chrome and Firefox on Ubuntu 20 and 22 without any problems. Happy Tweening! Link to comment Share on other sites More sharing options...
HeatherMA Posted November 11, 2022 Share Posted November 11, 2022 Hi Rodrigo I am using the latest Chrome. Have done a small screen capture so you can see what I mean. It's like the height of the element is lost for a split second but only at the ends of the scrolltrigger. thanks horizontal scrolltrigger glitch small.mov Link to comment Share on other sites More sharing options...
HeatherMA Posted November 11, 2022 Share Posted November 11, 2022 btw if I remove the vertical sections above and below the issue is resolved - not sure if this sheds any light? Link to comment Share on other sites More sharing options...
Rodrigo Posted November 14, 2022 Share Posted November 14, 2022 Hi, Can you please share more details about this such as OS and browser you're seeing this behaviour? Also this is happening only on the embedded Codepen or also in the codepen page? What about this URL without any iframes? https://cdpn.io/pen/debug/bGexQpq Happy Tweening! Link to comment Share on other sites More sharing options...
HeatherMA Posted November 15, 2022 Share Posted November 15, 2022 Working on Mac OS 12.6. Latest Chrome. It happens on embedded codepen and codepen page and also the link you shared without iframes. Also happens on my iPhone in Safari and Chrome. It also happens on the project which I'm working on which is why I came back to check the codepen to make sure it wasn't something I had done. Not sure what I can do further to show you - the video shows it best. Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted November 15, 2022 Share Posted November 15, 2022 Hi, Yeah, we just need as much information about browser and OS when seeing issues like this that we can't reproduce on our devices, that's all. I'll ping @GreenSock so He can take a look at this, since I'm not able to reproduce and He might know about this and tell us the culprit, if any. Please stand by. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted November 16, 2022 Share Posted November 16, 2022 It's very difficult for me to see, but I believe the issue has to do with the fact that the scrollTo tween is altering the scroll position but the browser takes a few milliseconds to fire the "scroll" event, and most browsers handle scrolling on a separate thread (not synchronized). Here's a workaround where I invalidate a cached value in an onStart and then call ScrollTrigger.update() in an onUpdate on the tween: See the Pen rNKzZdj?editors=0010 by GreenSock (@GreenSock) on CodePen I've updated the next release to work around this automatically. You can preview that at: ScrollToPlugin: https://assets.codepen.io/16327/ScrollToPlugin3.min.js ScrollTrigger: https://assets.codepen.io/16327/ScrollTrigger.min.js (You may need to clear your cache) Better? 1 Link to comment Share on other sites More sharing options...
HeatherMA Posted November 16, 2022 Share Posted November 16, 2022 Hi Jack Yes! That has resolved it Fantastic! Thank you for taking the time and for including it in the next release... Appreciate all the work you guys do. Heather 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