Jump to content
Search Community

Multiple particles animation from center

mishunov 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

Hello,

 

I want to replicate some sort of an explosion animation. For this, I have an SVG with quite a few particles (presented with `<path>`) being spread out across the whole canvas. This represents the end state of the animation (explosion). In the beginning of my animation I want to animate all the particles' `x` and `y` from the center of SVG so that the particles gradually get to their end positions from the epicenter of the explosion.

 

Now the question is how to achieve this in an efficient way preferably without looping through all paths and calculating their offsets in relation to the parent SVG?

 

Thank you.

 

Link to comment
Share on other sites

Hi @mishunov :)

 

If you're talking about circles or rectangles, this is pretty easy. Using the attribute plugin and a from() tween, you can animate the cx/cy of circles or the x/y of rectangles. Paths are a bit different.  If it were me, I'd loop through using .getBBox and make a tween or timeline from that data. Here's a simple demo with circles, rectangles and paths to show you one way it could be done.

 

See the Pen RLgLPy by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

  • Like 6
  • Thanks 1
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.
×
×
  • Create New...