Jump to content
Search Community

Particle dissolving from text

shelune test
Moderator Tag

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 and welcome to the GreenSock forums,

 

What you want to do is absolutely possible.

 

https://codepen.io/zadvorsky/pen/jqzMRj

https://codepen.io/zadvorsky/pen/BKJQep

 

However, those examples above use a 3D rendering engine called three.js in conjunction with GSAP. And there would be quite a bit of logic and custom coding you would have to do on top of that. 

 

Pixi.js handles 2D WebGL rendering on canvas which is also super fast and perhaps a bit easier to learn than three.js. Here are some examples to get the idea of the speed: http://www.pixijs.com/examples/ You can use Pixi with GSAP and get great results but you would still have to code your own particle engine.

 

If you are just starting out I would guess that both options above would be a very difficult path to go down right now. The good news is that GSAP is very easy to learn and once you have the basics down you can do amazing things very quickly. 

  • Like 4
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

What you want to do is absolutely possible.

 

See the Pen jqzMRj by zadvorsky (@zadvorsky) on CodePen

See the Pen BKJQep by zadvorsky (@zadvorsky) on CodePen

 

However, those examples above use a 3D rendering engine called three.js in conjunction with GSAP. And there would be quite a bit of logic and custom coding you would have to do on top of that. 

 

Pixi.js handles 2D WebGL rendering on canvas which is also super fast and perhaps a bit easier to learn than three.js. Here are some examples to get the idea of the speed: http://www.pixijs.com/examples/ You can use Pixi with GSAP and get great results but you would still have to code your own particle engine.

 

If you are just starting out I would guess that both options above would be a very difficult path to go down right now. The good news is that GSAP is very easy to learn and once you have the basics down you can do amazing things very quickly. 

 

Thanks a lot for your advice. Well I did start out with a basic course on ihatetomatoes so I got the basics of tweening, fromto, timeline, etc... Do you have any recommendations what to take next to take closer steps to what I wanted to achieve up there? 

Link to comment
Share on other sites

I would search CodePen for particles.

http://codepen.io/search/pens?q=particles&limit=all&type=type-pens

 

For any effects that have over 1000 particles you will probably find that they are all rendering to <canvas>

Poke around and see if they are using plain javascript or using a library like Pixi or Three js

How the particles actually animate is probably the least important factor right now.

The big issue is finding out how the particles are going to be created and positioned in such a way that they appear to coming out of the text. 

How that happens is going to most likely depend on whether you are using a 3D or 2D renderer.

FWIW this is probably one of the most difficult effects you could try to replicate, especially as a beginner.

However its totally possible that the exact effect you need exists on CodePen or somewhere else online. Might just take some hours of searching.

 

 

Here's a great snow demo from Blake that illustrates how well GSAP can animate 12,000 particles without skipping a beat using Pixi.

http://codepen.io/osublake/pen/BjNZYP?editors=0010

  • Like 3
Link to comment
Share on other sites

Those Three.js examples are crazy!!!
 
For something a little easier, check out this post. It has some links and demos for creating particles from images using GSAP and canvas.
http://greensock.com/forums/topic/14444-led-wall/?p=61619
 
Most of those examples are just using pixel values, so they're squares. Creating randomly shaped particles like in that video is much harder to do. You would most likely have to split your shape up into a bunch of polygons. Delaunay triangulation is a good way to do that, and there are tons of JavaScript libraries that do this.

 

Here's the first one I found on GitHub.

https://github.com/sokeroner/Delaunay-Triangulation

 

Click on screen to add points...

http://sokeroner.github.io/Delaunay-Triangulation/example1.html

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.
×
×
  • Create New...