Simple looped 'pulse ripple' effect - what am I doing wrong?

[Delarge]

 Hi, this has been driving me a little bit mad as it seems so simple, I get so close, but I think I'm just one line or setting away.

 

The codepen demo best shows where I'm at.

 

For each circle I need to go, scale up, scale down, stagger each one, stop at the end, wait for 1 second, do it all again.

My codepen is almost there, just doesn't scale them back down.

 

I've tried nested timelines to handle the grow and shrink, yoyo in various places - which isn't quite right as it pauses after each play/direction.

 

Any help would be greatly appreciated.

 

Thanks so much!

See the Pen 64ed03293b8eabbdb7ecd44621132395 by delarge (@delarge) on CodePen

[akapowl]

 

Hello there, @Delarge
 

you have a yoyo on your tween but no repeats whatsoever, so the yoyo won't do anything.

Also depending on what you want to do, a yoyo on the tween itself won't be the right choice; if you put a repeat on that tween directly (like where you have that yoyo set), it would tween the circles back to their initial scale from right to left, which is not what you intend if I understood your description correctly.

If you wanted them to go back to their initial scale from left to right, you would have to e.g. put the yoyo and the repeat on the stagger object instead.

 

See the Pen abQYqdY by akapowl (@akapowl) on CodePen

 

 

 

Alternatively you could also just add another tween to the timeline with the same configuration as the first one, except this one scaling back to 1.0 instead of course, and using the position parameter to position it, so it starts after the first tween is finished tweening on the first element.

See the Pen MWzVQwp by akapowl (@akapowl) on CodePen

 

 

 

Depending on where exactly you're going with that, one suggestion may be more suited to be used in some scenarios than the other.

 

Sidenote: I changed the ease in these demos to 'none' just to make things a bit more clear, as your back tween was a bit irritating to me when tinkering with things.

 

Also, next time when you post a minimal demo alongside your question, it would be great of you to make sure that demo is forkable (not set to private on codepen) so people willing to help won't have to take the extra step of recreating your demo themselves when they need to tinker with it and/or present some suggestions to you. 

 

I hope this will help. Happy tweening!

 

[Delarge]

Thank you akapowl, both solutions solve my issue.

 

The first is clean but the second was how I was thinking of it, but I was doing a 2nd timeline instead of just a 2nd tween and also missing the positon parameter if I remember right.

 

And yes, I will make any furture pens forkable, I didn't notice the private setting was on, thanks.

 

For me, GSAP is something I won't need to use for a while, then suddenly a project needs it and you're back in it - bang! Whilst it is easy to pick back up again, some of the basics get rusty.

 

Thanks again!

 

[Delarge]

In addition, I think recapping on what 'yoyo' really means is useful, it counts as a separate tween(?)

 

I was approaching it as yoyo means run it forward then back and it all counts as 1 'run through'.

 

So doing that repeat: 1 in the stagger object in the first example is what I was missing as well.

[akapowl]

 

Jup, just as I said above, setting yoyo to true alone, won't do anything.

 

33 minutes ago, Delarge said:

In addition, I think recapping on what 'yoyo' really means is useful, it counts as a separate tween(?)

 

No, not really - it is more 'just' a setting that determines whether a set repeat of a tween (or a stagger or even a whole timeline) should play backwards (when yoyo: true) instead of repeating the exact movement from scratch again on repeat.

It's described pretty well in the documentation, too.

 

https://greensock.com/docs/v3/GSAP/Tween/yoyo()

 

Quote

Gets or sets the tween’s yoyo state, where true causes the tween to go back and forth, alternating backward and forward on each repeat. yoyo works in conjunction with repeat, where repeat controls how many times the tween repeats, and yoyo controls whether or not each repeat alternates direction. So in order to make a tween yoyo, you must set its repeat to a non-zero value. Yoyo-ing, has no affect on the tween’s reversed property.

 

52 minutes ago, Delarge said:

Whilst it is easy to pick back up again, some of the basics get rusty.

 

Thanks again!

 

I actually wouldn't exactly call those the basics of GSAP;

 

With that second approach you need to wrap your head around the timing for when to set up that second tween in the timeline via the position parameter, and that first example even makes use of the advanced stagger object  

 

It also has hints with regard to the type of animation you're approaching in the documentation.

 

This right here as the example for the stagger object;

 

gsap.to(".box", {
  y: 100,
  stagger: { // wrap advanced options in an object
    each: 0.1,
    from: "center",
    grid: "auto",
    ease: "power2.inOut",
    repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish // <-------
  }
});

 

And a more thorough description of yoyo / repeat in that context, here:

 

https://greensock.com/docs/v3/Staggers#special-properties

Happy to hear it helped!