DeltaFrog Posted April 22, 2022 Share Posted April 22, 2022 Hi All, I'm trying to wrap my head around the ScrollSmoother but can't seem to get a basic setup to work. As soon as I add these divs and the JS my layout breaks. Do I need to add some CSS to the new divs or somthing? <div id="smooth-wrapper"> <div id="smooth-content"> </div> </div> JS: let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 2 }) Feels like I am missing something. :S See the Pen ea7368ec854ca0d0ac921f25b99fd180 by deltafrogcraft (@deltafrogcraft) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted April 22, 2022 Solution Share Posted April 22, 2022 14 minutes ago, DeltaFrog said: Feels like I am missing something. :S Yes, some scrollable space Setting a height like 5000px on the body will not help much, as it is the #smooth-content that needs to have a scrollable height. You can see that in the demo from the docs. See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen See the Pen oNpOqjK by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
DeltaFrog Posted April 22, 2022 Author Share Posted April 22, 2022 Of course! Thanks Akapowl. 2 Link to comment Share on other sites More sharing options...
Tokilab Posted April 26, 2022 Share Posted April 26, 2022 Hi everyone! I have a weird problem on one of my projects and I can reproduce it with this codepen; I'm testing your codepen on smartphone and the C square seems to shake when scrolling! Did you see that too? Is there a fix known? Thanks a lot! Link to comment Share on other sites More sharing options...
OSUblake Posted April 26, 2022 Share Posted April 26, 2022 Welcome to the forums @Tokilab It's usually best to create a new topic. Are you seeing the same problem as in this thread? Link to comment Share on other sites More sharing options...
Tokilab Posted April 26, 2022 Share Posted April 26, 2022 Oops Sorry In the enthusiasm of having found a codepen and a similar topic, I didn't think about opening a new topic. Yes I do have the same glitch as this thread, even with the fix: effects: false, smoothTouch: 0, Thanks! Link to comment Share on other sites More sharing options...
OSUblake Posted April 26, 2022 Share Posted April 26, 2022 Thanks. We're looking into the problem, but can you tell me what browser and OS you are seeing this issue with? Link to comment Share on other sites More sharing options...
Tokilab Posted April 27, 2022 Share Posted April 27, 2022 Yes of course, the problem appears a lot on android S20, on chrome. Also on macbook pro 15"(Retina screen) on chrome v100.0.4896.127. Much more on the new macbook pro m1 than on an old version, on chrome v100.0.4896.127. And it doesn't seem to be perfectly smooth on Safari too. Good luck, and thanks a lot! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted May 1, 2022 Share Posted May 1, 2022 @Tokilab Are you saying that the orange box shakes when scrolling in this demo?: https://cdpn.io/pen/debug/KKXZOyZ Even on a MacBook Pro (desktop)? I can't seem to reproduce that at all. Not even a little bit. But iOS devices do have a browser bug that misreports scroll positions. You can try setting normalizeScroll: true on the ScrollSmoother config object and see if that helps. Also make absolutely sure that you're using the latest version of ScrollTrigger and ScrollSmoother. 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