monospace Posted September 14, 2021 Share Posted September 14, 2021 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 More sharing options...
Solution OSUblake Posted September 14, 2021 Solution Share Posted September 14, 2021 Welcome to forums @monospace How about this? See the Pen NWgabyd by GreenSock (@GreenSock) on CodePen 6 Link to comment Share on other sites More sharing options...
monospace Posted September 14, 2021 Author Share Posted September 14, 2021 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! 2 Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 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 More sharing options...
monospace Posted September 15, 2021 Author Share Posted September 15, 2021 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 More sharing options...
OSUblake Posted September 15, 2021 Share Posted September 15, 2021 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 5 Link to comment Share on other sites More sharing options...
monospace Posted September 15, 2021 Author Share Posted September 15, 2021 Brilliant. Thanks! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now