Fountain Effect in GSAP

[mcsekar 0 Likes (Newbie)]

I purchased GSAP and I have been trying to get the water fountain effect like this one: http://demos.playfuljs.com/particles2/3 I have no clue how to do this as the demo uses CANVAS which GSAP does not support/use. Please help how to achieive this effect purely through GSAP ? Thanks for your time.

[PointC 14,466 Likes (Superhero)]

Hi @mcsekar

 

Welcome to the forum and thanks for joining Club GreenSock.

 

GSAP can animate any numeric property. It doesn't matter whether it's canvas, SVG or just some plain old divs. Here's a great thread that can probably help with your particle fountain:

Blake has an awesome fountain demo in that thread here:

Hopefully that helps. Happy tweening and welcome aboard.

[OSUblake 18,534 Likes (Superhero)]

Did you buy GSAP just for that effect? You can certainly use GSAP to animate a fountain effect using one of the physics plugins, but you're going to have to use canvas if you want to move that many particles around the screen. Using HTML or SVG just won't be fast enough for anything more than a couple hundred particles. That demo has 1,000 particles.

 

[macguffin 32 Likes (Newbie)]

Even better use pixijs - webGl with a canvas fallback.

 

https://github.com/pixijs/pixi-particles

https://pixijs.github.io/pixi-particles/examples/fountain.html

 

This would be the easiest way to get a fountain effect