Confetti With Greensock

[celli]

Hi, I am trying to create a confetti effect similar to what we see done with canvas in the codePen. There's got to be an easier way then how I've been going about it with staggering and repeating to achieve this effect -- Can someone help with a confetti effect using greensock ?

See the Pen OPMqPV by celli (@celli) on CodePen

[Diaco]

Hi celli 

 

Surely you have better performance with canvas for this type of particle effect , and you can use GSAP engine for Canvas Update/Draw loop :

 

for example :

TweenLite.to(rect, 1.5, {x:100, y:200, onUpdate:draw});

or

TweenLite.ticker.addEventListener("tick", draw);

or use GSAP great plugins for canvas animation frameworks ( Easel / Kinetic / Raphael ) .

 

but you can have almost same effect ( less count particles due devices/browsers render limitation ) with SVG or DOM based particles ; pls check these links :

 

simple div particles :

 

See the Pen wBGvgW by MAW (@MAW) on CodePen

 

simple svg particles :

 

See the Pen pvyoQL by MAW (@MAW) on CodePen

[celli]

Yes, these look pretty cool ! Thanks. I've played with the SVG, but is there an easy way to change a circle to a small square that is rotating like a piece of paper confetti might in the sky as it's falling ?

[Rodrigo]

Hi,

 

You could use Pixi which is a WebGL rendering engine with a canvas fallback, is super fast and you can tap GSAP into it with no trouble at all to have better control over animations. Also Pixi has the spriteBatch class, which is designed to hold a huge amount of elements:

 

http://www.pixijs.com/

 

http://www.goodboydigital.com/webgl-spritebatching-arrives/

 

Basically you could create a loop to add the elements to the stage and give them a random color and finally animate their vertical position and opacity as they and the horizontal position based on the mouse position.

[Diaco]

yep , you can easily tween scale and rotation property to have look like paper pieces falling , something like this :

 

simple svg paper particles :

See the Pen ogxXgG by MAW (@MAW) on CodePen

 

simple div paper particles :

See the Pen MYywaw by MAW (@MAW) on CodePen

[celli]

These are all great! I am studying them now, and learning a lot from them !!

[celli]

Hi Diaco.AW,

 

When using the 

See the Pen MYywaw by MAW (@MAW) on CodePen

 I notice that the first time it runs it drops the confetti in one shot -- and then you need to wait until they all fall before the next set of confetti starts and they start to appear to loop seamlessly. Is there any way to override that first sequence, and just get into the looping of the dots ? Maybe with a negative delay or something ?

[celli]

I added the delay, and it does the trick

 TweenMax.to(elm,Random(5)+4,{y:h,ease:Linear.easeNone,repeat:-1, delay:-6});

[RonA2Zman]

Is there a way to use something besides a rectangle for the confetti, such as a leaf svg shape?

[Diaco]

Hi RonA2Zman 

 

sure , you can do anything you like in css or in generate loop .

 

pls check this out : 

See the Pen KdmwMb by MAW (@MAW) on CodePen