GSAP repeated stagger loop

Question

I have the 3 following HTML elements:

<div class="item"><h2>Item 1</h2></div>
<div class="item"><h2>Item 2</h2></div>
<div class="item"><h2>Item 3</h2></div>

And the following JavaScript:

var timeline = new TimelineMax({paused:true, repeat: -1});
timeline.staggerFromTo($('.item'), 1, {css:{x: -20, opacity: 0}, delay: 0.15, ease:Elastic.easeOut}, 0.5);
timeline.play();

It works but this is not the behaviour I am looking for.

How it works right now : Item 1 fades in > Item 2 fades in > Item 3 fades in

How i would like it to work : Item 1 fades in > Item 1 fades out > Item 2 fades in > Item 2 fades out > Item 3 fades in > Item 3 fades out

Answer 1

Does the below help?

Snippet:

 var items = document.querySelectorAll('.item'), length = items.length; var duration = 1; var tl = new TimelineMax({ paused:true, repeat: -1, delay: duration * 0.5 }); for (var i = 0; i < length; i += 1) { tl.from(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeOut }); tl.to(items[i], duration, { x: -20, opacity: 0, ease: Elastic.easeIn }); } tl.play(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <div class="item"><h2>Item 1</h2></div> <div class="item"><h2>Item 2</h2></div> <div class="item"><h2>Item 3</h2></div> 

If I am not wrong, .staggerFromTo() doesn't help here because you need to add 2 tweens of the same element into the timeline first, one for fading in and one for fading out . Hence, a loop is used. And then the typical .from() and .to() methods are used from GSAP to achieve the fade and slide effect.

Also, I am not sure why you had a delay applied to each of the tweens. I have moved it into the initialisation of TimelineMax assuming that you want to delay the whole animation sequence before it first starts.

Hope this helps.