krystln Posted October 11, 2023 Share Posted October 11, 2023 Hi, I was trying to integrate smooth scrolling with nextjs in the page router. I was successful with react. But in nextjs the window is not even scrolling : (. Can anyone point me to where I am wrong... React working link : https://stackblitz.com/edit/react-yazbek?file=src%2FApp.js Here's the stackblitz's Nextjs link : https://stackblitz.com/edit/next-typescript-xhd7tv?file=pages%2Findex.tsx Link to comment Share on other sites More sharing options...
Rodrigo Posted October 11, 2023 Share Posted October 11, 2023 Hi @krystln and welcome to the GSAP forums! The issue here is that you're not setting the correct ids for the wrapper and content elements. By default ScrollSmoother looks for this DOM structure: <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> This is what you have in your demo: <div id="scroller-wrapper"> <div id="scroller-wrapper"> </div> </div> You have to use either the default setup (see the first code snippet) or tell ScrollSmoother the specific element or selector for the content. We have some base examples for using ScrollSmoother in Next apps: https://stackblitz.com/edit/nextjs-efumgr This one uses the app router: https://stackblitz.com/edit/stackblitz-starters-lq58ww Hopefully this helps. Happy Tweening! 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