Search code examples
gsap

Animate repeat infinite TweenMax


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();

Solution

  • 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