Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

TimeLine Max particles

Recommended Posts

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 ...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Nice work! Thanks for posting your solution.

Link to comment
Share on other sites

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 :)

  • Like 5
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;
}
  • Like 2
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 5 months later...

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.

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.
×