Jump to content
Search Community

ScrollTrigger does not fire onToggle Animation everytime

3oax test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

It's just a logic issue in your code. Imagine what's happening with the playhead of each of your timelines - when you play(), it starts moving the playhead forward and then when it reaches the end, it completes but if you play() again, the playhead is already at the end, so there's nowhere for it to go. If you restart() or play(0), that would move the playhead back to the start and go from there. 

 

In your case, you've got an onComplete on your "out" timeline that correctly sets the "in" playhead back to 0, but you aren't doing anything similar for the "out" timeline, so when its playhead reaches the end, it's done and it never gets set back to 0. 

 

I think you could simplify things to this: 

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

 

Notice I'm doing dynamic tweens on each onToggle so that if someone scrolls quickly back and forth, the fade would pick up naturally from wherever it is at that point. 

 

Does that clear things up for you? 

  • Like 1
Link to comment
Share on other sites

thank you!

 

i'm wondering if there is a way of doing it without dynamic tweens? 

in the end it will be an animation where a lot is going on and it will be easier and more readable to use timelines with play() but i like the "pick up" of the tweens.

Link to comment
Share on other sites

28 minutes ago, 3oax said:

if there is a way of doing it without dynamic tweens? 

Sure. If you want to do that I might suggest animating a container of your elements for the out animation. That way you don't have to worry about conflict. If it's a simple fade all you have to do is make sure the progress goes back to 0 when entering the section again.

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