Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ekfuhrmann

Using GSAP to loop a pulsing animation

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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:
image.thumb.png.9ae40850a5836b92ecc0143d2de07a35.png
 

Link to comment
Share on other sites

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);

 

  • Like 2
Link to comment
Share on other sites

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);

👍

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×