GSAP timeline runs only once

[momo12]

Guys I have a question. I have this timeline but the thing is it only runs:

gsap.set(".mask-img-reveal",{transformOrigin: "bottom center", scaleY:0, opacity:"100"});
var tl = gsap.timeline({paused: true, onComplete:function(){tl.kill()}});
tl.to(".mask-img-reveal",{transformOrigin: "bottom center", scaleY:1, duration:1})
    .to(".mask-img-reveal",{transformOrigin: "top center", scaleY:0, duration:1});

$( ".people-img" ).hover(
  function() {
      tl.play();
  }
);

I have no idea how I can make it run everytime the hover event happens.

[Rodrigo]

Hi,

 

The .play() method sets the paused state of the GSAP instance from true to false as it makes it's playhead active. In your case the first time the timeline goes from paused to not-paused and moving forward. Then the timeline completes and the playhead is at the end of the timeline, but the timeline is still not paused and active. When you call the play method you're basically not changing anything.

https://greensock.com/docs/v3/GSAP/Timeline/play()

 

There are a few alternatives, you can use the .restart() method or use a time or label parameter with the play method.

https://greensock.com/docs/v3/GSAP/Timeline/restart()

 

Finally I'm curious about the fact that you are killing the timeline instance once is completed but you want to play it every time the mouse enter event is triggered. Any particular reason for that?

 

Happy Tweening!