Jump to content
GreenSock

jeff4gee

Particle Animation

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

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

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.

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.
×