Jump to content
GreenSock

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

ScrollTrigger does not fire onToggle Animation everytime

Go to solution Solved by GreenSock,

Recommended Posts

Hello,

 

I'm trying to animate content in a pinned section. i want to animate the content on enter in a different way than on leave.

but it only works three times (i think?)  onEnter, onLeave and onEnterBack. I dont understand why.

 

Can someone help me out?

See the Pen wvopbvg by 3oax (@3oax) on CodePen

Link to comment
Share on other sites

  • 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

wow nice! never used invalidate.

 

Thank you for your help!

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