Jump to content
Search Community

Restarting stagger animation

mik test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
Share on other sites

  • Solution

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 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...