TimeLine Max particles

[celli 88 Likes (Contributor)]

Hi,

 

I see some demos and examples that create particles from one circular div, but is there something simple that can break down the code for me to understand better -- a simple example that just throws circle particles from a center that has a larger radius than a single pixel ? Maybe a random range about 100x100 pixels from where the particles start from, and a max number of 30 random particles fading randomly from 0 to 100 opacity and scaling from +=200 within a random 500x500 pixel radius area, or something like that ?

 

A simple demo that will help break it down to better understand how to make efficient particles would be very helpful. I have the "Physics2DPlugin.min.js" plugin, but I'm unsure this will help make the particles work after reading through the docs ...

[celli 88 Likes (Contributor)]

I am trying to achieve something like this codePen 

See the Pen soLrF by jamiejefferson (@jamiejefferson) on CodePen

 but in a way that the particles only shoot out once, like a mini explosion. Tweaking this code and trying to decipher it hasn't led me to achieve the result I'm looking for... is there a way to simplify this codePen so that it is a single mini explosion with 50 particles ? This would help to understand how to break it down and create particle effects better. Thanks in advance.

[celli 88 Likes (Contributor)]

I did manage to create something of an explosion effect, in case anyone is looking for something like that.

It is set to yoyo and repeat, but you can remove those to get a one-time explosion effect --

See the Pen IdALq by anon (@anon) on CodePen

[Carl 11,317 Likes (Superhero)]

Nice work! Thanks for posting your solution.

[GreenSock 18,864 Likes (Superhero)]

I took a crack at a version for you too that ensures the dots are within the circular emitter area, and has physics applied. You can totally mess with some variables too in order to get just the feel you want:

http://codepen.io/GreenSock/pen/hCElc/

 

I made it draggable just for fun

[celli 88 Likes (Contributor)]

This explosion is great! I like the gravity effect when the emitters fall, very useful in my learning how to control the particles !

[jamiejefferson 1,200 Likes (Superhero)]

Since we're all having fun

See the Pen rJtjw?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

[Lynx 2 Likes (Newbie)]

All these particle effects, wow, is it possible to, with the help of a svg image do a transition between one <div> into another <div> as the SVG image as the particle effect ?

[jamiejefferson 1,200 Likes (Superhero)]

I'm not sure I understand the effect as you describe it, but I'm certain it would be possible. If we can make generic particles and tween them I see no reason you couldn't make SVG particles or whatever else you have in mind and tween those. If you give it a try let us know how it goes.

[Lynx 2 Likes (Newbie)]

I know the Physics2DPlugin does, obviously the Physics aspect of particles, but what does the actual particles with TweenMax ?

[jamiejefferson 1,200 Likes (Superhero)]

The particles in this demo are just divs with class="dot"

for (var i = dotQuantity - 1; i >= 0; i--) {
  dot = document.createElement("div");
  dot.className = "dot";
  TweenLite.set(dot, { xPercent:-50, yPercent:-50, force3D:true });
  document.body.appendChild(dot);
  dotPool[i] = dot;
}

[Carl 11,317 Likes (Superhero)]

Here are 2 more demos that use particles. 

All of these demos share similar techniques of

 

1: creating a loop to generate elements

2: animate each element with GSAP

 

DIV: http://codepen.io/MAW/pen/wBGvgW?editors=001

SVG: http://codepen.io/MAW/pen/pvyoQL?editors=001

[Lynx 2 Likes (Newbie)]

My goal is I have an SVG image, when via an anchor is clicked the SVG image which is really a div with content does a transition.  How does the transition work simple; imagine a box, or a div, this div is red, your SVG image is a 12px X 12px image particles are replaced by this image, from the top of the box or div the particles emit, rather the particles of the SVG image emit, using SVG is more compatible with responsive layouts.   Anyhow as the particles, rather the particles of the image rain down it changes from a red div or box, to a blue div or box, the particles end when the div or box is not completely blue, in other words they don't rain down, via gravity forever, it ends by the end of the div.  And there is displayed the new blue div/box with the new content, understood ?

[Carl 11,317 Likes (Superhero)]

Sorry, I'm having a lot of trouble reading your explanation and can't at all visualize the effect. 

I think it will be best to just focus on the basics of GSAP for a bit before jumping into something this complex. 

We'd love to help you understand the GSAP API better but this type of effect is going to take a fair amount of setup of HTML and CSS before you even begin to animate. 

 

Please start a new thread when you have some sort of starter demo for us to see so that we can get a better idea of the types of elements you will be working with. Thanks!

[Lynx 2 Likes (Newbie)]

I'll make an animated GIF in a new thread !

[Michael71 59 Likes (Contributor)]

Here's an old particle animation with many small canvases.

 

See the Pen FpiJw by netgfx (@netgfx) on CodePen

 

And an old blog post I had written: http://nightlycoding.com/index.php/2013/10/particles-with-kineticjs-and-collision-detection/

[Lynx 2 Likes (Newbie)]

These particle effects are good, when your going to something specific, as in a SVG graphic breaking up into particles, is this possible, all I see are examples of firework type effects, and visually as great as they may be to some, visually there sorta bland.

[subir 0 Likes (Newbie)]

Thanks for great plugin. Is there any option to make multiple emitter in different and control them by classname?

[Carl 11,317 Likes (Superhero)]

Hi subir,

 

Welcome to the forums. I suspect what you want will require some customization. However, this demo shows an emitter in 2 separate DOM elements. Perhaps that will be a good starting point for you.

 

http://codepen.io/GreenSock/pen/nkylt

[subir 0 Likes (Newbie)]

Hi Carl, Thank you very much for your effort. This is exactly what I need.