Share Posted February 16, 2016 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
Share Posted February 16, 2016 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. 2 Link to post Share on other sites
Solution Share Posted February 16, 2016 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. 3 Link to post Share on other sites
Author Share Posted February 17, 2016 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
