React-Locomotive-GSAP markers disappeared

[maxvia]

Hi guys, 

 

I have added smooth scrolling within my application using locomotive. I have added it on top of my App component. It is working good and is not messing up with my animations that use scrolltrigger within my main App component however my animations that uses scrolltrigger within my children components don't work anymore. 

My triggers markers disappeared. 

 

In my main component I have added:

      const locoScroll = new LocomotiveScroll({
        el: smoothScroll,
        smooth: true,   
      });
      locoScroll.on("scroll", ScrollTrigger.update);

 

I am sure it is something dumb but what is the norm for working with both (gsap and locomotive) within React?

 

Thank you!

[akapowl]

 

Hey @maxvia

 

Have you hooked locomotive-scroll up to ScrollTrigger via .scrollerProxy?

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

If not, check out the demo on that docs-page linked to, for an example on how to hook it up.

If so, and you still cant get it working, please create a minimal demo (even without your react environment could help), so it's easier to help.

 

[maxvia]

Hey @akapowl, thanks for the reply. I did try with locomotive or smooth-scroll but I have the same issue still happening. I believe it is probably a react issue with my dom fully loading after my gsap animation so that the height given to gsap is wrong.

Anyway for now I will live it aside because I am not so sure I want some smooth scrolling on my app for user experience.