LutzDev Posted June 20, 2023 Share Posted June 20, 2023 Hi everyone, I'm quite new to GSAP and would like to use the library for a project. I'm seeking some assistance regarding an issue I'm facing with the ScrollSmoother Plugin. Enabling the plugin is messing up the layout of my page. I have tried troubleshooting it myself, but unfortunately I haven't found a solution yet. The provided CodePen demonstrates the issue with a simplified example (SmoothsSroll is commented out in the example). I would be grateful if someone could give some guidance on how to solve this issue. See the Pen zYMBbOx by LutzDev (@LutzDev) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 20, 2023 Solution Share Posted June 20, 2023 I don't have much time to dig into this, but ScrollSmoother is meant to handle the entire page, not an individual nested <div>. Think of it like smoothing the scroll of <body>. But your layout is built in a totally different way where you're not scrolling the <body> at all - instead, you've got a nested <div> that has overflow that's scrolling. You need to adjust your layout so that it's the root page that's scrolling. It's totally fine to have position: fixed elements outside the smooth-wrapper if you want. Thanks for being a Club GreenSock member! 💚 1 Link to comment Share on other sites More sharing options...
LutzDev Posted June 21, 2023 Author Share Posted June 21, 2023 Thanks for response. I had initially thought that ScrollSmoother might not be compatible with my layout. 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