Particle Animation

[jeff4gee]

I am looking to create a particle animation similar to the video below with GSJS. What is the best way to go about this. Where should I start.

 

 

 

http://www.istockphoto.com/stock-video-18351884-colorful-numbers-background-loop-pastel-rainbow-hd.php?st=1f7e5fb

 

 

Thanks for your help!

[Michael71]

As far as I see, the numbers do 3 things:

 

each is scaling by a random amount and with an ease like expoEaseOut

each is moving left and right by a tiny amount randomly

each is moving from a point to another in a random range (some go right, some left)

 

this should get you started with the "effects" that you need to use I think.

[jeff4gee]

Thanks for the help. I had thought building it out but was curious before I do if there is a better way. Also thought about combining TimelineMax and the BezierPlugin together.

[GreenSock]

You could certainly use the BezierPlugin, but it doesn't look necessary to me. Here's a rough approximation that could certainly be tweaked to get closer to the sample you posted: 

 

See the Pen 26e5f390d6458e80419d9b723497dbb6 by GreenSock (@GreenSock) on CodePen.

 

Does that help?

[jeff4gee]

Wow that's awesome. Thanks for your post. This is what I was looking for.

[ElectricEnjin]

I'm new to HTML and coming from a flash background. How does this particle animation get implemented?  Any help would be appreciated, thanks!

[Carl]

HI s4ct,

 

Not really sure what you need help with in regards to implementing the particle animation. 

 

You might want to visit the particle animation pen and click share > download zip which will give you a local set of HTML, CSS and JavaScript files to work with.

 

Have you read the Getting Started Guide or the Jump Start?

 

http://www.greensock.com/get-started-js/

http://www.greensock.com/jump-start-js/

 

---

 

Let us know if there is something more specific you need assistance with.