indextwo Posted January 5 Share Posted January 5 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 Link to comment Share on other sites More sharing options...
Carl Posted January 5 Share Posted January 5 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. 2 Link to comment Share on other sites More sharing options...
Solution Carl Posted January 5 Solution Share Posted January 5 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. 2 Link to comment Share on other sites More sharing options...
indextwo Posted January 5 Author Share Posted January 5 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 😅 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now