kisha Posted August 18, 2020 Share Posted August 18, 2020 Hi all, I made a codepen demo, it works fine on scrolling down, but when I scroll back up, I want reset to be triggered but only when the element is 100% out of view, and I dont want to use reverse instead of reset. Basically I dont want reset animation to be visible on scrolling back, and the reason I want reset animation there is so my tween will play again on scrolling down. I tried creating another tween with scrolltrigger but with no luck. How can I archive this? Maybe with changing start: "top 85%" to start: "top 100%" onComplete? See the Pen BaKzGVM?editors=1010 by kishadark (@kishadark) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 18, 2020 Share Posted August 18, 2020 Hey kisha and welcome to the GreenSock forums. You can achieve this by using two ScrollTriggers: one for the enter and one for the leave. I showed how to do this just yesterday in a different thread: 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 18, 2020 Share Posted August 18, 2020 Applied to your demo: See the Pen eYZzxRQ?editors=0010 by GreenSock (@GreenSock) on CodePen 2 1 Link to comment Share on other sites More sharing options...
kisha Posted August 18, 2020 Author Share Posted August 18, 2020 42 minutes ago, ZachSaucier said: You can achieve this by using two ScrollTriggers: one for the enter and one for the leave. I showed how to do this just yesterday in a different thread: Hi and thanks. It worked for me. Do you mind telling me why use of anim.pause(0) for onLeaveBack? Does pause(0) reset it? I read some docs and saw options like reset and reverse for toggle actions. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 18, 2020 Share Posted August 18, 2020 5 minutes ago, kisha said: Do you mind telling me why use of anim.pause(0) for onLeaveBack? ... I read some docs and saw options like reset and reverse for toggle actions. If you have two ScrollTriggers controlling the same animation then it's best to not directly hook up the animation to the ScrollTriggers but to use the callback methods like I showed. That way they don't conflict. But if you are just using the callback methods then the toggleActions don't apply. Does that make sense? If not, I recommend watching the ScrollTrigger video again. 6 minutes ago, kisha said: Does pause(0) reset it? Yep! 1 1 Link to comment Share on other sites More sharing options...
kisha Posted August 18, 2020 Author Share Posted August 18, 2020 Thanks! I sure will rewatch it. 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