restarting a timeline

[BradLee]

Hi all,

 

 

I'm using timelineLite to control hover animations. What I'm trying to do is play an animation on mouseover, and a different on mouseout. Before each animation plays, I check if there is already an animation playing and kill it. In my code each animation will run once but not again after that. I think it's because their playheads aren't returning to the start but that is why I'm using .invalidate();

See the Pen BKxZVz by BradLee (@BradLee) on CodePen

[OSUblake]

The main issue here is that your timelines aren't synced. Your code also isn't running the way you think it is.

 

Let's start with your animation function.

const raiseAnimation = (div) => {
  let timing = 1,
    tl = new TimelineLite({paused: true});

    let tlConfig = {
      backgroundColor: 'blue',
    };

    tl.invalidate()
      .to(div, timing, tlConfig);

    return tl;
};

let tlRaise = raiseAnimation(div);

This only gets called once in your code, returning a new timeline. This is also the only time you invalidate it, but you're doing it on an empty timeline.

 

You also said that you're checking if an animation is playing...

let animation = false;

div.addEventListener('mouseout', () => {
  if (animation) { animation.kill(); }
  animation = tlRaise.play();
}) 

But you're just checking a truthy value, so it's always going to be true after the first animation. To check if an animation is running, you can use .isActive().

 

About the syncing issue. You're running 2 timelines against each other, so their progress values need to be the inverse of each other. So if one timeline's progress value is 0.7, the other timeline's progress value should be 0.3. You can get and set the progress value using .progress().

 

That should help you get back on track.

[Jonathan]

Hello BradLee,

 

Just to add to Blake's great advice!

 

If you need all previous recorded starting and end values cleared, you could add invalidate() before your kill() method like this:

// so this line:
if (animation) { animation.kill(); }

// becomes this:
if (animation) { animation.invalidate().kill(); }

invalidate()

• Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

Resources:

GSAP invalidate(): http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/invalidate/

Helpful explanation about invalidate() by GreenSock's Jack: http://greensock.com/forums/topic/13987-invalidate/#entry59036

 

[OSUblake]

Nice tip! Just add in the isActive check to the if statement which I brought up earlier.

// so this line:
if (animation && animation.isActive()) { animation.kill(); }
// becomes this:
if (animation && animation.isActive()) { animation.invalidate().kill(); }

And let me clarify what I meant by keeping them in sync. I wasn't suggesting that you actually update the progress value on the other timeline when an animation is running. Only at the start of an animation except for the very first one.

 

Here's why it only runs once. Both timelines have a starting progress value of 0. If the first timeline plays all the way through, its progress will be 1, so the other timeline's progress should be 0, which it is. On the next animation, if the second timeline plays all the way through, it's progress will be 1, so the first timeline should be at 0, but its at 1. So when you go to play the first timeline, it's already done, which means the second timeline's progress should be 0, but it's at 1, and now you're stuck like Chuck.