Ripple loader, from CSS to GSAP
Hi there!
I'm new in the GSAP world but already loving it!
Today, I'm trying to replicate a loader animation that I found on loader.io. The problem is that it provides either a CSS animation or an animated (SMIL) SVG (which is bound to be obsolete). That's why I tried, in order to be better at tweening, to replicate the effect using the base SVG minus the animations.
The effect I'm looking for is a seamless loop: when the first ripple is a 50% of the animation, the second one should
Thanks for the demo.
From what I understand I think you can just set each set of circle tweens to repeat like so:
var circle1 = document.getElementById('circle1');
var circle2 = document.getElementById('circle2');
new TimelineMax({})
.fromTo(circle2, 2, {autoAlpha:1}, {autoAlpha:0,ease:Power0.easeOut, repeat:-1},0)
.fromTo(circle2, 2, {attr:{r:0}}, {attr:{r:44}, ease:Power1.easeOut, repeat:-1},0)
.fromTo(circle1, 2, {autoAlpha:1}, {autoAlpha:0, ease:Power0.easeOut, repeat:-1}, 1)
