Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
monospace

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

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

  • Like 5
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.
×