Jump to content
Search Community

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

HimanshuW test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

 

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

 

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