Jump to content
Search Community

Morph with Particles

Lynx 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'm going to assume it's possible to animate SVG paths with wind using Physics2D Plug-in along with Morphing so particles are attached to paths and as those particles move in the wind, the path can morph into another shape as it moves in the wind ?

 

I hope after all the "Is it possible" questions I've thrown at this forum; I know the limitations of GSAP, and how to solve those work arounds, if required.

Link to comment
Share on other sites

I can't quite tell if you're joking or not. 

 

If you're not joking, can you provide some sort of sample (even video) of what you're looking for? With enough elbow grease, you can accomplish just about anything. But no, it's certainly not super simple to just chuck some physics2D at morphSVG and "poof" get some realistic particle wind-based morphing effect along a whole path. 

  • Like 1
Link to comment
Share on other sites

I don't need realistic, as long as it can be done. 

 

I don't have any example I can show other then, a circle, or rather many circles as a svg shape, being animated by physics2D while it's being animated by wind, as it animates it morphs into another shape ?

Link to comment
Share on other sites

Sorry, I'm not even sure where to start with this. Without knowing exactly the effect you're after, I'm at a loss, but this doesn't sound like an easy undertaking, that's for sure. 

 

MorphSVGPlugin lets you animate from one <path> shape to another <path> shape (just by tweening the "d" attribute). That's it. And Physics2DPlugin lets you apply velocity/acceleration/friction to the x and y properties of an element. That's it. You can't really have two completely different effects controlling each of the points on a <path>. They'd conflict. But again, with enough code/effort, it's possible to create virtually any effect. Like I created a flapping cape effect here: http://codepen.io/GreenSock/pen/WQjRXE/?editors=001 but it took a lot of code to map all those points to sine waves, apply stuff in an onUpdate, etc. It's not a simple "oh, morph from this shape to that shape" because of the very particular style of movement in a realistic flapping cape. 

 

So this doesn't sound like an effect that'd be simple to create, and we wouldn't be able to burn all the hours to build it for you, but with enough effort on your part you may be able to pull it off. No promises ;)

Link to comment
Share on other sites

That's a bit clearer of an explanation. At first I thought you wanted to morph the path an object was moving on OR apply physics to the speed of different points that were being morphed.

For what you describe now it seems like you could animate the position of a <g> and morph a <path> inside it like:

 

See the Pen JKdOvP by GreenSock (@GreenSock) on CodePen

 

I assume you can morph multiple paths into one shape, with wind.  For example, in one <g> group you have multiple circles, you want, suppose six circles to morph into a custom shape within 3 seconds of those circles animating ?

Link to comment
Share on other sites

Sort of. Each path can use the same path data as the end shape, however if you start with 3 circles and you morph them each to the same elephant shape... you are still going to have 3 elephants at the end.

 

I think the best thing for you to do now is try it for yourself. 

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/

 

You have free access to MorphSVGPlugin. Give it a shot, and let us know where you get stuck. 

 

Happy Tweening!

Link to comment
Share on other sites

By the way, you can have a bunch of circles (or whatever) in a single <path> and have it morph into one shape - you'd just need to make sure your SVG authoring program puts them all into the same <path> and of course they couldn't have different fill colors or strokes (because they're all technically the same element). 

 

Have fun!

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