[.each element timeline, repeat but pause on first element when animations complete?]

Ah, I didn't realize I could just add it that way, perfect, thank you!

 

And whoops, you're right about the X position! 

[.each element timeline, repeat but pause on first element when animations complete?]

Is there a better way to handle this? Still learning, and tried searching for answers unsuccessfully.

 

The best method I found to repeat a timeline on each element was this code, but then after it runs through once, I needed the first element to come back and pause. So I decided to use a setTimeout after 16 seconds (each element runs for 4 seconds, so after 16 seconds the animation is over) and then do another timeline on the first element to show it again and essentially pause the animation.

 

This works, but I doubt this is the best way, and there might be a native timeline way to handle this?

 

Codepen Link

 

    var tl = new TimelineMax();

    $(".title__sub").each(function(index, element){
      tl.to(element, 1, {opacity:1})
        .to(element, 1, {x:400, opacity:0, ease:Power2.easeIn}, "+=2")
        .to(element, 0, {x:0})
    })

    setTimeout(function(){
      tl.to(".title__sub--1", 1, {x:0, opacity: 1});
    }, 16000)

 

 

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