BenjaminO Posted March 30, 2022 Share Posted March 30, 2022 Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !! Link to comment Share on other sites More sharing options...
OSUblake Posted March 30, 2022 Share Posted March 30, 2022 Welcome to the forums @BenjaminO It's hard to answer questions without a minimal demo. You can use CodeSandbox if you'd like, and you can use ScrollSmoother on there too. Just add gsap-trial instead of gsap for a dependency and then import your stuff from gsap-trial. Ex... import gsap from "gsap-trial"; import ScrollTrigger from "gsap-trial/ScrollTrigger"; ... 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 31, 2022 Share Posted March 31, 2022 You can ignore that overscrollBehavior warning. It's not an error - it's just a warning. Maybe you're on a browser that doesn't recognize that CSS property, but it won't hurt anything. As for the browser lagging a lot, like Blake said we'd really need to see a very clear minimal demo in order to troubleshoot. Can you post one please? It doesn't need to be your real project - just a minimal demo with fake assets is fine. 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted March 31, 2022 Author Share Posted March 31, 2022 Hello thank you both for your replies. After digging more, it seems that the lagging (and the warning ⚠️) was only affecting Safari (v 15.4 MacOS). I retried this morning and I had the same problem in the beginning but after few seconds, no lagging! I went back to VS Code and I had this message (see picture). Maybe the update from vite 2.8.6 to 2.9.0 played a role ? I still have the warning in Safari though but I think I can live with that. 1 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted March 31, 2022 Solution Share Posted March 31, 2022 30 minutes ago, BenjaminO said: Maybe the update from vite 2.8.6 to 2.9.0 played a role ? I'm not sure how that could play a role as Vite is just a build tool. It's not like it's actually running the animations or anything, but glad to hear that the issue is resolved. 😁 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 31, 2022 Share Posted March 31, 2022 28 minutes ago, BenjaminO said: I still have the warning in Safari though but I think I can live with that. Safari doesn't have overscrollBehavior, so it's not an issue. Just putting this here because I know other people are going to ask the same question. We'll look into disabling that warning in the next release. https://caniuse.com/?search=overscroll-behavior 1 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