My sprites aren't resetting the way I want them to

[monospace]

Hey everyone, first time poster here. I'm building an animation of a "bubble" background. The idea is that bubbles are rising to the top of the container, and once out of view get repositioned below the bottom edge of said container. So far, so good, have a look at my CodePen. Problem is that the bubbles/sprites get repositioned smack inside the middle of the container, creating a "popping" effect that I do not want. I know that setting x and y in GSAP is using relative values, but the number I'm using to reposition the sprites is high enough that they should get reset out of view. Any ideas? 

See the Pen xxrXEOg by monospace (@monospace) on CodePen

[OSUblake]

Welcome to forums @monospace

 

How about this?

 

See the Pen NWgabyd by GreenSock (@GreenSock) on CodePen

 

[monospace]

Wow, thanks for the speedy response. And thanks for the elegant re-working. Lots of things to pick apart for me there.
Returning a fromTo() tween out of a function? Whoa.
Am I right in assuming that xPercent and yPercent let you set the origin of a sprite/div? Nifty!
And built-in shortcuts for randomization? 
So much to learn!

[OSUblake]

18 minutes ago, monospace said:

Am I right in assuming that xPercent and yPercent let you set the origin of a sprite/div? Nifty!

 

Yeah, it's nice way to center stuff.

 

19 minutes ago, monospace said:

And built-in shortcuts for randomization? 

 

Definitely one of my favorite features of GSAP!

 

[monospace]

Okay, I think I am following most of what's happening here.
Now what do I do if I want this animation to pause or stop?
Is there a way to get a reference to this tween/timeline and do a .pause() on it?

[OSUblake]

Yeah, you can do this.

 

// pause
gsap.getTweensOf(".circle").forEach(tween => tween.pause());

// resume
gsap.getTweensOf(".circle").forEach(tween => tween.resume());

 

See the Pen yLXzGYd by GreenSock (@GreenSock) on CodePen

 

[monospace]

Brilliant. Thanks!