Animate repeat infinite TweenMax

user3810167 picture user3810167 · Nov 5, 2015 · Viewed 12.6k times · Source

I have this code which animate an object of opacity 1 to 0 .

But I want to know how I can do to make this action is repeated infinitely, each 1 second ?

Any ideas ?

var tl = new TimelineMax();

        tl.add(timeLine_parpados.to($parpados,0.1,{opacity:1})); // parpados aparecen
        tl.add(timeLine_parpados.to($parpados,0.1,{opacity:0})); // parpados desaparecen

        tl.play();

Answer

Nick R picture Nick R · Nov 5, 2015

You could do something like this:

var el = document.getElementById("element");
var tl = new TimelineMax();

tl.to(el, 1, {alpha:0, repeatDelay:1, repeat:-1, yoyo:true})
tl.play();

JSFiddle demo

1 second between the element displaying and fading out. repeat:-1 will repeat the animation indefinitely.

yoyo:true, this works with the repeat property, and makes the animation reverse, so it's smooth when the div next fades in