Particle Ball

[cfx]

Guys,

 

I've used greenock before on website deployments but I'm no expert, we're going to be using it much more now and the first project we've come up with is (as usual) tricky.

 

Is it possible within GSAP to replicate something like this? Seems ambitious but I'm sure GSAP can handle it 

 

Interested in any other threads that discuss these principles. Needless to say I'm trying to avoid defaulting to After Effects..

 

Buzz

See the Pen qpKyzv by cfx (@cfx) on CodePen.

[OSUblake]

Hi @cfx

 

GSAP is an animation engine, and does not handle rendering. You could certainly use GSAP to animate the particles in that demo, but you would still need to write all the code to handle the creation and rendering of the particles. In short, the hardest part of that demo is the rendering, and there is no easy way to do something like that. The amount of code would probably be the same if GSAP was used to handle the animations.

 

The biggest problem I see with that demo is that it's using a 2d canvas to do 3d rendering. It's doable, but far from optimized. It would be much easier, and faster to create something like that using three.js. Once you have something that can be rendered in three.js, it's very easy to animate it using GSAP.

https://threejs.org/

https://github.com/mrdoob/three.js

 

[cfx]

Thanks for the reply.

 

Actually this looks pretty straight forward with three.js and low overhead so great tip thanks!

 

Buzz

[cfx]

Just to let you know, this was a piece of cake in THREE.js - will support it with GSAP.

 

Buzz

[OSUblake]

Nice! You should also check out this thread for a simple three.js plugin.

 

 

[cfx]

4 minutes ago, OSUblake said:

Nice! You should also check out this thread for a simple three.js plugin.

 

 

That's really useful Blake! Thanks so much.

 

Now go enjoy your Saturday - even superheroes have a day off...

 

Buzz

[Dipscom]

On 20/01/2018 at 4:02 PM, OSUblake said:

Nice! You should also check out this thread for a simple three.js plugin.

 

 

 

@OSUblake my love/jealousy of you unhuman ability to be here, catalogue and remember information never ceases to increase.

 

Please never reproduce, there would not be any webdevelopment work left if there were more than one of you.