Jump to content


Lightweight Particle Generator?

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 Everybody,


I'm trying to find a particle emitter/generator in HTML5 that's relatively easy to use. I found Pixi and Pixi Particles but the Pixi library that requires loading is heavy for advertising. Is there something similar out there available that's relatively easy to use?


I know Greensock doesn't really do particle engine builds or anything , but I thought this forum isn't a bad place to ask.


Im not looking for anything too fancy just something with count, speed/gravity, life, and image/array loading.


Does anybody use something that's easy to modify out there?


Thanks for any feedback. :)

Link to comment
Share on other sites

Yes, we don't necessarily have a particle-engine tool but a lot of our tools can be glued together pretty easily for particle effects.


If you need basic gravity, velocity, friction etc our Physics2DPlugin can help: http://codepen.io/GreenSock/pen/emjgxw


Physics2D and PhyscsProps are available to Club GreenSock members: http://greensock.com/club/


But just using a loop to generate a few tweens can usually get you some pretty awesome results. Check out Diaco's fireflys: http://codepen.io/MAW/pen/wBGvgW

  • Like 5
Link to comment
Share on other sites

Creating a simple particle emitter isn't too hard. I helped somebody build one here.



If you need to move a bunch of stuff around, canvas is definitely the way to go. Pixi is even better because it uses WebGL. And Pixi Particles is even better as it does pretty much everything.


I don't make banners, so I'm not familiar with the restrictions you have to deal with. I know Pixi is a pretty big file, but that includes everything in the entire library. You can create your own custom build to trim it down. It's also on several CDNs.


Here's a couple of particle demos I made with Pixi. Even if you can't use Pixi, the concept is still the same, and you might be able to gain something from them.


Here's my take on GreenSock's

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

. The stars in the explosion are generated dynamically.

See the Pen avbPON?editors=0010 by osublake (@osublake) on CodePen


My take on the bunny benchmark.

See the Pen vNwRdO by osublake (@osublake) on CodePen


This one's a little more complicated as it's pushing out a ton of particles, and doing some other stuff like making their eyes follow them. In this one, I'm using a sprite sheet for all the graphics. I didn't use a packer, so I had to manually separate the textures into frames. 

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

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