Using GSAP to loop a pulsing animation

[ekfuhrmann]

Hey there, I created a CSS example of what I'm trying to create in GSAP. The issue I'm running into is I can't figure out in the docs how to simulate a negative animation delay outside of building individual timelines for each ring and then running all of those timelines from specific points of time and looping those timelines. A part of me feels there needs to be a better approach to such a simple loop such as this, but perhaps that's not the case?

In my head it'd be nice if there is a yo-yo like function I can apply to a stagger tween that rather than going from forwards to back, it repeats itself on an individual tween level (as opposed to a timeline level).

So with that said, what would be the best way to approach this animation from the context of GSAP?

See the Pen ZEKKKEe by ekfuhrmann (@ekfuhrmann) on CodePen.

[GreenSock]

You mean like this?:

See the Pen VwbbbyN?editors=0010 by GreenSock (@GreenSock) on CodePen.

[ekfuhrmann]

1 hour ago, GreenSock said:

You mean like this?:

Yes! That's terrific. Is there any way to have the timeline already "started" so to speak so that the initial state on the page has the rings?

 

Basically this being frame 0:

 

[OSUblake]

You can advance the time to whatever you want.

 

let animation = gsap.to(".ring", {
  scale: 1.75,
  opacity: 0,
  duration: 2,
  stagger: {
    each: 0.5,
    repeat: -1
  }
});

// advance the time
animation.time(2);

 

[GreenSock]

Yep, and if you don't want to use a variable...

gsap.to(".ring", {
  scale: 1.75,
  opacity: 0,
  duration: 2,
  stagger: {
    each: 0.5,
    repeat: -1
  }
}).time(2);

?

[ekfuhrmann]

Great stuff, thank you both @OSUblake and @GreenSock!

[ekfuhrmann]

Again, thanks for assisting with my question! If you're interested in what that pen was working towards, here is a little pen I threw together leveraging GSAP.

 

See the Pen QWvGBjz by ekfuhrmann (@ekfuhrmann) on CodePen.