re-triggering Timelinemax during animation

[steve5000 0 Likes (Newbie)]

Hi All,

 

I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example.

 

My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading.

 

I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. 

Help will be very much appreciated.

 

Thanks for your time.

 

Steven

See the Pen YPQyqy?editors=101 by anon (@anon) on CodePen

[Diaco 1,999 Likes (Superhero)]

Hi steve5000 

 

you can use .isActive() to check if your tween/tl is playing or not , and if not .restart() :

// Click "NEXT" button functionality -------------------------
$("#next").click(function(){
if(!tlB.isActive()){
  // Text array cycle

  // Transition animations
 tlB.restart();
 }
});
var tlB = new TimelineMax({paused:true});
tlB.staggerFrom(".stag", 0.5, {x:-10, opacity:0, ease:Back.easeIn}, 0.15);

or just using restart .restart() :

// Click "NEXT" button functionality -------------------------
$("#next").click(function(){
  // Text array cycle

  // Transition animations
 tlB.restart();
});
var tlB = new TimelineMax({paused:true});
tlB.staggerFrom(".stag", 0.5, {x:-10, opacity:0, ease:Back.easeIn}, 0.15);

[steve5000 0 Likes (Newbie)]

Thanks Diaco.

 

You have made me very happy this morning. Works perfectly.