Sonix Posted October 31, 2020 Share Posted October 31, 2020 Hi, I would like to animate circles in an Svg. So that each one blinks up for a short time, and then the next one and so on. A made a gif animation so it should be clear. I thought about blending in and out each one through the opacity, but I don't know how to stage them. The svg is in the codepen demo. I am new to gsap so what's the best way to do this? See the Pen ZEOxNPN by sonix875 (@sonix875) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 31, 2020 Share Posted October 31, 2020 Hey Sonix. As usual, there's multiple ways to do this sort of thing. I would probably create a timeline then loop through your circles and create a couple of .set() calls (or .to() if you want it to be more animated in) for each, one to show the circle and one to hide it. You can use the index of the loop to create the offset. See the Pen BazrgQq?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
mikel Posted October 31, 2020 Share Posted October 31, 2020 Hey @Sonix, I would probably stagger See the Pen KKMojRK?editors=1010 by mikeK (@mikeK) on CodePen Happy staggering ... Mikel 2 Link to comment Share on other sites More sharing options...
Sonix Posted October 31, 2020 Author Share Posted October 31, 2020 Thanks for the answers, both work well for me! 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