Trying to get repeatDelay without it being applied to yoyo

[indextwo]

I've got a super-simple staggered tween that increases the height of a sequence of lines:
 

let midPoint = 210;

gsap.to('.eq-line', { attr: { 'y1': (midPoint - 30), 'y2': (midPoint + 30) }, duration: 0.3, stagger: { from: 'start', each: 0.02, yoyo: true, repeat: -1, repeatDelay: 1 }, ease: 'sine.inOut' });

What I'm aiming for is for the lines to do a Mexican-wave style animation from left to right, then pause and start again: so each line would go up-down-pause. However, what's currently happening is it goes up-pause-down-pause, because of the yoyo. I totally get why: yoyo is reversing the tween, and the tween has a repeatDelay, so it's simply applying the same repeatDelay when it runs backwards. But this isn't what I want, and I'm sort of struggling to figure out a graceful way around it.

 

My 'best' idea is to just animate each line in a forEach loop and apply a regular delay of i * 0.02, but I feel like I'd just run into the same problem; plus I wanted it in a named timeline so I can control it from other areas of my code, and this method feels like it could get messy.

 

Is there a straightforward way to get what I'm after?

See the Pen JjzGgPz by indextwo (@indextwo) on CodePen

[Carl]

thanks for the demo. I think a loop would provide the best solution / most flexibility and you could have all your tweens in a timeline that could be paused/played as normal.

 

Here's a not-so-conventional approach using a slow() ease that is configured to end where it begins thus getting rid of the need for a yoyo.

If you don't like the ease of the up-down animation you could also create a customEase with finer control over the rate of change.

 

Here is a quick demo of the slow() ease:

See the Pen oNVbKPb?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I slowed down the stagger each amount so that you could see how the repeating works.

[Carl]

if you want the whole wave play through and then just repeat maybe just have a timeline that repeats like so.

 

See the Pen JjzGgVY?editors=1010 by snorkltv (@snorkltv) on CodePen

 

the first time I read the question I thought each line needed their own repeatDelay.

[indextwo]

Perfect! Thanks for the quick answer, Carl. The second example is exactly what I'm after. I'd played around with timeline parameters too, but obviously not in that configuration 😅