Jump to content
Search Community

ScrollTigger animation "pop" because of ScrollSmoother

Alex.Marti test
Moderator Tag

Go to solution Solved by Alex.Marti,

Recommended Posts

Hello,

 

I'd like to use GSAP ScrollSmoother on top of ScrollTrigger (with some SlitText) but I have animation issue.

 

I'm trying to use GSAP as a reusable component with React like the documentation here (section #reusable-animations)

 

But it's not working well, the 1st animation is running smoothly but the other one are juste popping in the screen. As soon as I remove the

ScrollSmoother.create();

the animations are good again. So definively something on ScrollSmoother side.

 

Do you know what cause the issue?

 

Thanks

 

Alex

See the Pen oNpEvwv by iamalexm (@iamalexm) on CodePen

Edited by Alex.Marti
change post title
Link to comment
Share on other sites

  • Alex.Marti changed the title to ScrollTigger animation "pop" because of ScrollSmoother

If you log out those effects to the console it looks like your smoother is being created after the scrollTrigger animations.

It's important it gets created first.

I'm not super clued up on React so not sure how to do that, but maybe someone else can jump in!

  • Like 1
Link to comment
Share on other sites

  • Solution

Thanks a lot @Cassie

 

Because of what you said I found the solution.

 

I use the React Hook useLayoutEffect() to initialize the ScrollSmoother and the hook useEffect() to initialize the GSAP animation.

 

As what I understood, useLayoutEffect() is called before useEffect(). Anyway, it's working nicely now, thanks to you!

 

I changed my codepen acordily

 

 

Alex

 

  • Thanks 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...