Run through animation, pause then rerun animation.

[KevinJ 4 Likes (Newbie)]

Hi All,

 

I'm trying animate elements in an svg to fade in, once all the elements are visible, they will fade out after short delay and the animation will run again.

 

Should I use onComplete?

 

KJ

 

 

See the Pen EybYax by kjames (@kjames) on CodePen

[Carl 11,164 Likes (Superhero)]

Thanks for the demo. Seems it was loading only TimelineMax and not TweenMax. No worries, I fixed it:)

 

Whenever you want the most control over a sequence I suggest a timeline over triggering things with onComplete.

 

From what you described, I would start with this:

 

var tl = new TimelineMax({repeat:-1, repeatDelay:0, delay:0.5})

tl.staggerTo(".hex", 0.5, {opacity:1}, 0.2)
  .staggerTo(".hex", 0.5, {opacity:0}, 0.2, "+=1"); //fade out after 1 second

http://codepen.io/GreenSock/pen/jAaExk?editors=0110

[KevinJ 4 Likes (Newbie)]

Thanks Carl. Exactly what I was trying to do.

 

KJ