Jump to content
Search Community

When using ScrollTrigger and smooth-scrollbar in multiple React components all animations break

mimoid-prog test
Moderator Tag

Recommended Posts

When you use smooth-scrollbar, React and GSAP ScrollTrigger in multiple React components all animations stop working.
Firstly I thought it's Gatsby issue but the same thing happens for pure React.
Everything works well if you don't use smooth-scrollbar, also everything works well when you use smooth-scrollbar and store all scrollTrigger animations in one useEffect.

But when you move them to other components then all animations stop working.

Try to use my codepen example. Animations don't work but when you comment out scrollTrigger object from the "Other" component then it starts to work.

See the Pen QWNzKXv by mimoid-prog (@mimoid-prog) on CodePen

Link to comment
Share on other sites

Hey mimoid-prog. Variables aren't shared between components in React. If you import ScrollTrigger into each component and setup smooth scroll it works:

See the Pen BaKvWzX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm guessing the proper way might be to pass the ScrollTrigger instance to the child component somehow? I'm not a React guy so I can't help there. I know it's definitely not a GSAP issue though :) Maybe @elegantseagulls or @Rodrigo can help provide some additional info.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hello @GeekEagle - welcome to the GSAP forums.

 

As you can see in the example for ScrollTrigger with smooth-scrollbar.js on the documentation page for the .scrollerProxy(), pinning works just fine with smooth-scrollbar if you set it up correctly.

 

See the Pen oNLqgBm by GreenSock (@GreenSock) on CodePen

 

 

 

It would probably be best if you could create a new thread for your question. Also, if you need any help to get it working, a minimal demo would be very helpful and much appreciated - as it is close to impossible to guess blindly what might be causing your problems. Thanks!

 

  • Like 2
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...