Infinite bubble animation

[Androlax 10 Likes (Newbie)]

Hello,

 

I am on this problem since 2 hours, it is something pretty simple I guess, but I can't find a way to do it properly lol (newbie in TweenMax)

 

If you could help me that could be nice ^^

 

Here is the codepen : 

 

 

I would like the bubbles to feel infinite, I mean, when the timeline is over, there is a delay since a new bubble come, and I really don't see how to make it smooth :s

 

Thanks for your help

See the Pen JjjQLPa by th-o-benoit (@th-o-benoit) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey Androlax and welcome!

 

I would use a single tween with stagger to do this and not worry about the timeline because you can't really have a timeline be playing two parts at once. 

 

I went ahead and switched over to using GSAP 3's formatting which makes this easy because you can put the repeat: -1 inside of the stagger, which makes it repeat like you want it to  I also set the stagger duration based on how many circles there are so that they are evenly spaced out.

 

See the Pen gOONeEg?editors=0010 by GreenSock (@GreenSock) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

I added an x animation and a modifier to make it look a little more bubble-like  

 

See the Pen QWWXrwx?editors=0010 by GreenSock (@GreenSock) on CodePen

[Androlax 10 Likes (Newbie)]

Hey @ZachSaucier

 

Thanks you alot, didn't even saw the new version aha ! I think I understood, timeline wasn't the good idea, went the wrong way!