Create a smooth, SVG circle ripple effect

[vanludvig]

The current version has uneven ripples that don't start at the same time when they repeat to create an infinite, even ripple effect.  I've tried using TimeLineMax, but  the ripples are not constant since it waits for the timeline to end to start again. 

 

My question is how can I achieve smooth, even ripples that are infinite without pauses on restart or irregular start times?

 

Found answer: don't use repeatDelay, and just use delay() on the second and third circles.

- Thank you

See the Pen ExamaMO by vanludvig (@vanludvig) on CodePen

[ZachSaucier]

Hey vanludvig and welcome. 

 

The reason why a repeatDelay is not needed in this case is because the animations are already offset from the delay. Since they're the same duration and repeat immediately after they finish, they stay offset as they did at the start.