Ripple loader, from CSS to GSAP

[Les Vikings 3 Likes (Newbie)]

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 start and when the second one is at 50%, the first one should start again... You get the idea

 

I tried with two timelines but my brain can't seem to process the delays and duration needed to achieve the effect, let alone the easings...

 

Thanks in advance to anyone willing to assist a noob in understanding the intricacies of the GSAP world

See the Pen BLyLBy by tilvalhall (@tilvalhall) on CodePen

[Jonathan 5,318 Likes (Superhero)]

Hello tilvalhall, and welcome to the GreenSock forum!

 

While we look at your example, I just wanted to make sure this helpful video tut on understanding the position parameter.

 

 

That is the key to offsetting your tween circles. Using relative offsets for the position parameter like =+ and -=.

So if your tweens duration is 1 second you can make the position parameter have a relative offset to start half way through the previous tween before it, like so "-=0.5" .. that run the tween a half of a second or 50℅ when you want the tween to start. Does that make sense?

 

Also this example might help it doesn't do rings but it does circles and it's within a button. but you can remove it from being inside a button so the whole circle can display.

 

http://tympanus.net/codrops/2015/09/14/creating-material-design-ripple-effects-svg/

 

Check that video tut and ripple effect tut while we test your codepen.

 

Thanks

[Carl 9,720 Likes (Superhero)]

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)
  .fromTo(circle1, 2, {attr:{r:0}}, {attr:{r:44}, ease:Power1.easeOut, repeat:-1}, 1);

http://codepen.io/GreenSock/pen/ZpYJBv?editors=0010

 

this way circle2 can play again before circle1 stops animatiing

[Jonathan 5,318 Likes (Superhero)]

Nice Carl. I forgot about recommending to place the repeat property on the tween itself. That's the second time I forgot about that goodness!

[Les Vikings 3 Likes (Newbie)]

Oh nice! I didn't know that the Tweens could be so "independant" from the Timeline! That is very cool!

 

Thanks a million to you both for such a quick answer and tips!