Jump to content
GreenSock

Vicoconut

How to explode SVG in particles from center

Go to solution Solved by OSUblake,

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 everyone,

 

I'm working to animate an explosion on SVG but got stuck with it. I would like each element of SVG going in random direction from center.

 

Does anyone know a solution ?

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

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo.

Unfortunately this is going to require a bit of trigonometry in order to get the angle from the center of the svg to the element and then find a destination value to tween to. Its possible you could also find the angle to plug into our Physics2DPlugin. There are a few people that may consider this a fun challenge and have a solution for you, but we have to keep our official support much more focused on the GSAP API. Working with SVG coordinates is also a bit more troublesome than DOM elements.

 

You may want to try posting this question on StackOverflow and not even mention that you are using GSAP. The animation will be fairly straightforward was you figure out the x/y coordinates you want to animate each element to.

  • Like 3
Link to comment
Share on other sites

  • Solution

Using a little vector math, this is actually pretty easy to do. All you need to do is scale a vector. It's too bad JavaScript can't do operator overloading like a lot of other languages, because this could be a one-liner.

 

var newPoint = (point - center) * scalar;

 

Vectors are like points, but they have a definite direction and length, so the ratio between the x and y values is constant. This means you don't have to figure out the angle for a position. If you know the length of the x or y axis, you can figure out the other axis by multiplying it by a ratio/scale. If you've ever calculated an aspect-ratio for an element, like during a screen resize, it's the same concept.

 

You can see how it works in this demo. As an element moves away from the center, the rate of change between the x and y axis remains constant.

 

See the Pen ALwZLa by osublake (@osublake) on CodePen

 

 

So to pull this effect off, all you have to do is multiply the difference between an element and the center by some scalar value. Check it out. It creates a pretty cool effect. It's pretty uniform right now, but you could add some randomization to it. Changing the stagger value can dramatically change how the explosion looks.

 

See the Pen wzkrBr by osublake (@osublake) on CodePen

 

 

  • Like 9
Link to comment
Share on other sites

Wow, Blake. That's fantastic.

The way you explained it and implemented it actually does make it a lot easier than I originally had assumed.

 

Thanks for taking the time to put it all together. 

  • Like 1
Link to comment
Share on other sites

Wow amazing ! That's exactly what I wanted to do.

 

Thank you again for everything you've done and to explain things clearly and effectively.

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