Jump to content
GreenSock

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

Multiple particles animation from center

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

Nice one, Craig!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Dear, @PointC, you're truly a Superhero! Thank you very much for this solution – it's exactly what I was looking for. With some adjustments and tuning to make it look a bit more natural, I am able to go on with this example.

 

Thank you very much and a wonderful day!

  • Like 4
Link to comment
Share on other sites

@PointC, here is the final result, Craig if you're interested ;)

 

See the Pen XegVxb?editors=0010 by mishunov (@mishunov) on CodePen

 

One moment in the middle is a bit too harsh but, probably, will be able to smoothen it a bit with timing for production. Thanks for your help once again :)

  • Like 3
Link to comment
Share on other sites

Very nice. It's always fun to see the result of forum questions and answers. Thanks for sharing.

:)

 

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