Repeat yoyo with some pause/interval

[deb 4 Likes (Newbie)]

Hi Guys,

 

I am trying to make the yoyo animation to loop infinite time with some pause. Like it will shake about 5 times then pause for 2 sec and then repeat shaking. Is it possible?

 

Thanks

See the Pen dNMJJX by debrajr (@debrajr) on CodePen

[kez1304 7 Likes (Newbie)]

var element = document.getElementById("pilot");

var tl = new TimelineMax();

tl.fromTo(element, 0.1, {
  x:"+=20"
}, {
  x:"-=20",
  yoyo:true,
  repeat:10
})
.repeatDelay(2)
.repeat(-1);

This solution switches your TweenMax for TimelineMax.

 

I'm not sure if there's a way to do it purely with TweenMax, as it requires adding a repeat onto the tween itself (the 10, for the shaking), and then a repeat for the entire tween animation (the -1, infinite repeat), and finally a repeat delay onto the entire tween's infinite repeat (the 2, for a 2 second delay.

 

I also switched the two tweens from two to's, to a fromTo tween, as it just made more sense to do so in this instance.

 

Oh, and I added overflow: hidden to your '.wrapper' class in your CSS, to get rid of the annoying scrollbar appearing at the bottom of the page, but that's just me.

[kez1304 7 Likes (Newbie)]

See the Pen wgGyqO by anon (@anon) on CodePen

 

Is a commented and functioning pen for what you're trying to achieve.

 

 

Hope this helps!

[deb 4 Likes (Newbie)]

Perfect. This is exactly what I was looking for. Thanks @kez1304

[Dipscom 2,815 Likes (Superhero)]

Great job kez1304,

 

On top of the correct advice given, I'd like to add that you could pass the repeat and repeat delay into the Timeline's object.

var element = document.getElementById("pilot");

var tl = new TimelineMax({repeat:-1, repeatDelay:2});

tl.fromTo(element, 0.1, {
 x:"+=20"
}, {
 x:"-=20",
 yoyo:true,
 repeat:10
})