Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

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 post
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 post
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.