3oax Posted February 25, 2021 Share Posted February 25, 2021 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 More sharing options...
Solution GreenSock Posted February 25, 2021 Solution Share Posted February 25, 2021 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? 1 Link to comment Share on other sites More sharing options...
3oax Posted February 25, 2021 Author Share Posted February 25, 2021 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 More sharing options...
ZachSaucier Posted February 25, 2021 Share Posted February 25, 2021 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 More sharing options...
GreenSock Posted February 25, 2021 Share Posted February 25, 2021 Absolutely, you could even use invalidate() to help make it more dynamic while using pre-created timelines: See the Pen e304b85ee0db4a0f118cf93ab7fc2071?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 3 Link to comment Share on other sites More sharing options...
3oax Posted February 26, 2021 Author Share Posted February 26, 2021 wow nice! never used invalidate. Thank you for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now