Jump to content
Search Community

TimeLine Max particles

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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

  • 3 months later...

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

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

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.
  • Create New...