Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
mik

Restarting stagger animation

Recommended Posts

I have created a "pulse" animation using two staggerTo animations on TimelineLite.

Initial play works well. However, restarting the timeline (on hover) plays all animations at once. I suspect it ignores initial delay values created by staggerTo?

What am I doing wrong? Is there a better way to create this animation?

 

 

 

See the Pen eJXqve by mikmanic (@mikmanic) on CodePen

Link to post
Share on other sites

Hey mik, welcome

 

Your problem is caused because the second staggerTo is overriding the first.

 

One possible solution is to put the two staggerTos inside of a function and call that:

See the Pen jWREPr?editors=0010 by Zeaklous (@Zeaklous) on CodePen

.

 

I also recommend using mouseenter instead of mouseover to prevent it from playing multiple times when hovered.

  • Like 2
Link to post
Share on other sites

Hi mik  :)

 

Welcome to the forums.

 

It looks like the overlap of your two staggers is causing some issues on restart of the timeline. The fight for control of elements scale:

pulse.staggerTo(circles.children, 1, { cycle: { scale:[1.2, 1.3, 1.6] }, transformOrigin: "50% 50%" }, 0.15 );
pulse.staggerTo(circles.children, 0.5, { scale:1, transformOrigin: "50% 50%" }, 0.2, "-=0.75" ); // change to "-=0.25" and it works fine

By reducing that overlap a bit ("-=.25"), you can get the pulse animation you want and not cause issues on restart.

 

I've forked your pen with that change and switched the event listener to a mouseenter instead of a mouseover. I've also added an additional event listener which uses the isTweening() method to prevent the animation from restarting until it's finished. That may or may not be of use to you on your project, but I use it quite a bit to prevent clicks/hovers from triggering certain animations until the current animation finishes.

 

See the Pen VeNwLz by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening and welcome aboard.

:)

 

 

Edit: looks like Zach beat me to it. Our answers are a bit different though so you'll have options. :)

  • Like 3
Link to post
Share on other sites

Thanks! Seems that I miscalculated the offset value of the second animation. It should have not been greater than 2 x stagger value of the first stagger animation - "-=0.30".

Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×