2nd animation in timeline doesn't fire (using React hooks)

[HimanshuW 2 Likes (Newbie)]

I'm trying to change the opacity of a fixed div when the user scrolls to a trigger section

 

Opacity of fixed div is 0% at start (success)

100% when the centers of trigger section and fixed div align (success)

Animate back to 0 % at end (fail)

 

What am I doing wrong? Is there a simpler/better way of animating this?

See the Pen vYdKpLX?editors=1111 by himanshu-walimbe (@himanshu-walimbe) on CodePen

[akapowl 5,134 Likes (Superhero)]

 

Welcome to the GreenSock forums @HimanshuW

 

1 hour ago, HimanshuW said:

What am I doing wrong? Is there a simpler/better way of animating this?

 

You are actually making one of the most common ScrollTrigger mistakes, nesting scrollTriggers in individual tweens of a timeline.

 

 

 

 

How to best do it really depends on where you are going with this in the end, but if this one simple fade-in and then fade-out is all you are up to, then you could just do it like this - notice how there is only one scrollTrigger on the timeline object, which is the way to go with scrollTriggers on timelines:

 

See the Pen poabpOB by akapowl (@akapowl) on CodePen

 

[HimanshuW 2 Likes (Newbie)]

Thanks @akapowl. That is exactly what I wanted

 

Will check out those common mistakes

 

Cheers