Jump to content
Search Community

ScrollTrigger plugin, how to play the animation after first element is finish animation or onLeave ?

Vigil007 test
Moderator Tag

Recommended Posts

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

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

 

🤔

 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

 

  • Like 3
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...