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?