Jump to content

Les Vikings

Ripple loader, from CSS to GSAP

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.




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


Thanks :)

  • Like 1
Link to comment
Share on other sites

  • Solution

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



this way circle2 can play again before circle1 stops animatiing

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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!

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.