Vigil007 Posted May 4, 2021 Share Posted May 4, 2021 Hi, as title mentioned, I added the codepen demo below, basically the result i wanted to achieve is second ball play the animation once the first ball onLeave(end), the animation of second ball need to be similar as first ball. Same to apply to the rest third, fourth See the Pen qBrWqqK by smokeninja (@smokeninja) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 Hey Vigil, I think a stagger is what you're after. Then you can animate all the balls with one tween. You can also add a scrollTrigger to this tween which simplifies your code down a bit ☺️ See the Pen 5e0449f0bb4837e1e108170435b6f973?editors=1010 by cassie-codes (@cassie-codes) on CodePen Link to comment Share on other sites More sharing options...
Vigil007 Posted May 4, 2021 Author Share Posted May 4, 2021 2 hours ago, Cassie said: Hey Vigil, I think a stagger is what you're after. Then you can animate all the balls with one tween. You can also add a scrollTrigger to this tween which simplifies your code down a bit ☺️ Hi Cassie, thanks for the help, but it's not the expected result, if you notice the codepen demo i created, the first circle is actually reverse after onLeave by using "toggleActions" , so the expected behavior/result is while first circle is reversing (onLeave) , second circle is starting play the animation. Link to comment Share on other sites More sharing options...
Cassie Posted May 4, 2021 Share Posted May 4, 2021 Potentially like this? See the Pen 6e3fbf7346033d3b27b62a49d01d12f2?editors=0110 by cassie-codes (@cassie-codes) on CodePen You can sequence tweens on a timeline and then add a scrolltrigger to that timeline. 3 Link to comment Share on other sites More sharing options...
akapowl Posted May 4, 2021 Share Posted May 4, 2021 🤔 I am not 100% sure, I understood what exactly is the way you want things to happen, but if you want to trigger an animation for each ball onEnter and reverse that animation onLeave for each ball, maybe a forEach-loop to create ScrollTriggers for each ball individually is the way to go here (that were many for each'es now) - and a seperate ScrollTrigger that just takes over the pinning part. I wrapped the section you are pinning here, so you can use that wrapper as the trigger for the balls' ScrollTriggers. Maybe something like this? See the Pen 504b068974a29c2d7ed4fb2c24a6680e by akapowl (@akapowl) on CodePen 3 Link to comment Share on other sites More sharing options...
Vigil007 Posted May 5, 2021 Author Share Posted May 5, 2021 Hey Cassie and akapowl, thanks for helping to showing the different approach for the solution, I have better understand about it and yes, it's under expected result. It's very helpful. 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