lovesoul Posted April 30, 2025 Posted April 30, 2025 hello hi fellows, I was wondering if someone can help, Im been trying to set up smoothscrolling in my generatepress wordpress website that is built using beaver builder page plugin. scrollsmooth is loading properly, its returning HTTP 200 but somehow scrollsmooth did not work for my beaver builder website. The smoothscrolling js has been setup properly with delayed exclusion adding to wp rocket. window.addEventListener("load", function () { gsap.registerPlugin(ScrollTrigger, ScrollSmoother); ScrollSmoother.create({ wrapper: "#fl-main-content", content: "#fl-main-content > .fl-page", smooth: 2, normalizeScroll: true, ignoreMobileResize: true, effects: false, smoothTouch: 1.2 }); }); However, it did not work, I was wondering if any gurus can help esp with experience in beaver build, cheers. If it requires more customization, i love to work with someone who can help and pay for his time. Cheers Much thanks appreciated.
Rodrigo Posted April 30, 2025 Posted April 30, 2025 Hi, I'm not really familiar with the Beaver Builder, but to make ScrollSmoother work be sure that the smooth wrapper element is a direct child of the <body> tag. Just to check but are you including the ScrollTrigger file in your wordpress queue? Remember that ScrollSmoother works on top of ScrollTrigger. Maybe if possible you could share a small test site (not a production one) so we can take a better look. Normally we're not able to debug and do much on a live production site, but it would definitely be better than just a code snippet.
lovesoul Posted May 1, 2025 Author Posted May 1, 2025 Hi Rodrigo, Thanks for helping! Yes, smooth wrapper element is a direct child of the <body> tag, ScrollTrigger and GSAP is also being setup properly. I might need to rebuild a site with beaver builder and share the link here soon. thanks!
lovesoul Posted May 1, 2025 Author Posted May 1, 2025 Hi Rodrigo, I have created a sample site (theme: generatepress with Beaver builder page builder) with GSAP, Scrolltrigger and ScrollSmooth Setup. https://wordpress-1432177-5472003.cloudwaysapps.com/ Not sure what I did wrongly though, thanks for sharing your valuable insights.
Rodrigo Posted May 1, 2025 Posted May 1, 2025 You're not loading the ScrollSmoother Plugin, hence you're getting this error in the console: Uncaught ReferenceError: ScrollSmoother is not defined Also you're using a very outdated version of GSAP (3.11.0), just yesterday we released 3.13.0, just use this CDN links: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <!-- ScrollSmoother requires ScrollTrigger --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollSmoother.min.js"></script> Finally I'd recommend you to include your header, footer and content in the smooth-wrapper and container, something like this: <div id="smooth-wrapper"> <div id="smooth-container"> <header></header> <main></main> <footer></footer> </div> </div> Hopefully this helps Happy Tweening!
Solution Rodrigo Posted May 2, 2025 Solution Posted May 2, 2025 Hi, I just checked your site again and you have your custom script before the GSAP files, so that script is running before loading GSAP and the Plugins, so you still have the ScrollSmoother is not defined error: Your custom code should be after all the GSAP files so both GSAP and the Plugins are loaded and defined. Hopefully this helps Happy Tweening!
lovesoul Posted May 5, 2025 Author Posted May 5, 2025 Hi Rodrigo, Thanks for helping, I managed to achieve smooth scrolling. Many thanks for your help! 1
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