Jump to content


Space particles help

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 everyone, just started with GSAP and it looks great!


I'm posting here to ask for help. I'm currently aiming for this animation: (space particles)



I'm stuck on being able to like, infinitely spawn particles/stars after the old ones go behind the page or reach their maximum Z position, and garbage collect them.


Also, I'm having blur issues when Z position is at a high value. Is this a browser issue? If yes, what are the alternatives? Would scale be okay? I tried scaling but unable to achieve the effect on the video I posted.


Guys, your help is very appreciated!


Thank you

See the Pen LGKEXB by christianztamayo (@christianztamayo) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Thanks for creating the demo.


The technique we use on our speed test is to create a tween for each dot, when each tween completes it calls the same tween-creating function which gives the dot a new position and then tweens it again and this will happen recursively. You get a new tween each time a tween ends.


Here is how I changed your demo:




The old tweens will be garbage collected. It's not something you need to worry about.

However if you don't need a lot of randomness you could just tell each of your 500 tweens to repeat with repeat:-1.

  • Like 3
Link to comment
Share on other sites

Pretty neat Carl, thanks!


Just one more thing. I'm experiencing blurriness once dots get higher Z translates:




Is there a workaround for this?

Link to comment
Share on other sites

regarding the blur in order to make your dots bigger when the z increases the browser needs to stretch pixels. The best way around this is to scale objects and create the dots at their largest size and scale them from a scale of 0 to a scale of 1. 

  • Like 2
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.