Jump to content
Search Community

From Locomotive-Scroll to ScrollSmoother plugin

BenjaminO test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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 !!

Capture d’écran 2022-03-30 à 10.53.56.png

Link to comment
Share on other sites

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";
...

 

  • Thanks 1
Link to comment
Share on other sites

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. 

  • Thanks 1
Link to comment
Share on other sites

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. 

Capture d’écran 2022-03-31 à 11.32.26.png

  • Like 1
Link to comment
Share on other sites

  • Solution
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. 😁

  • Like 1
Link to comment
Share on other sites

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

 

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...