Jump to content
Search Community

Complex Vectors to Morph

nsohail test
Moderator Tag

Go to solution Solved by PointC,

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

Are there guidelines for how to make a vector graphic that will need to morph? I want to morph a complex vector graphic into another complex vector graphic. These vectors had clipping masks in adobe illustrator. How should I save these so the SVG code works well with the morphSVG plugin? 

 

Are there any tutorials on how to morph a complex vignette like the one shown in my codepen link? Guidelines for making graphics that will be converted to SVG will also be helpful for designers who make these graphics for me to convert. 

See the Pen zvbeOE by nsohail92 (@nsohail92) on CodePen

Link to comment
Share on other sites

Hi nsohail  :)

 

pls check the MorphSVGPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/

 

you can find all the information you need  +  video tutorial
 
btw , i don't think it's a good idea to morph complex graphic as your example ( from performance wise ; browsers/devices limitations + natural of svg graphics  +... )
  • Like 3
Link to comment
Share on other sites

I agree with Diaco. That would be incredibly difficult to morph using vectors. If all your graphics are that complicated, you would probably be better off doing image morphing.

 

Here's one library I know about. Check out these image morphing demos.

http://jembezmamy.github.io/morpher-js/demos.html

 

And the repo for that library. Looks like you could even get GSAP to work with it's API.

https://github.com/jembezmamy/morpher-js

  • Like 2
Link to comment
Share on other sites

I don't see any examples of complex vector graphics in GASP. I really want to know what the best practice would be when saving vectors as SVGs. What kinds of graphics or types of vectors are appropriate for morphing?

 

For something like this couldn't I select all the paths in a group and morph those? How would I do this?

 

Also is there image morphing in GASP?

Link to comment
Share on other sites

I'm in agreement with both Diaco and Blake. 

The artwork you are using doesn't lend itself well to morphing... unless you want to spend a lot of time breaking up each individual piece of each element.

 

Please see the collections of Diaco and Chris to get a better idea of what types of artwork MorphSVGPlugin was intended for:

http://codepen.io/collection/Arxekv/

http://codepen.io/collection/neJjvB/

 

Remember at its core MorphSVG can only morph one <path> into another <path> you can't pass in complex groups of items.

 

However, a single path can have multiple segments. Rob Levin did something pretty crazy with

 

http://codepen.io/roblevin/pen/dYembB

  • Like 2
Link to comment
Share on other sites

Thanks for you feedback so far guys. What if a did a simple vector figure like this? Is this doable? 

 

I want to transition a woman from standing to sitting. Also is it possible to have two different svg graphics morph? Or do both objects need to be one color? I tried morphing three objects that each have a different color, but they all ended up turning into one common color. 

 

You can see that codepen here:

See the Pen vNPvvV by nsohail92 (@nsohail92) on CodePen

Link to comment
Share on other sites

  • Solution

Well, I'll throw my 2 cents worth out there too. 

 

Everyone above is giving you really great advice and trying to save you a lot of work and I completely agree with Carl, Diaco and Blake. :)

 

This thread caught my attention as I'm in the middle of a fairly complex morph right now. I'm morphing a horse into a saddle. The mane and tail are fairly complex with a large number of points. Now, the morph plugin works perfectly throwing a lot of points at it, but it's also a matter of making it look nice.

 

In my case, I started with the entire horse as one path and tried to go straight to the saddle, but that wasn't looking good so I broke the horse into three parts (body, mane and tail) and morphed each of those into three pieces of the saddle. This is looking much better, but it's still quite a bit of work to get it just right and this is only three paths. I'm not sure how many paths you have in your SVG, but it looks like a lot. You have to remember, as Carl pointed out, it's path to path - not group of paths to group of paths.

 

Regarding best SVG design practices - have you seen this post by Sara Souedian? It's really good information.

http://sarasoueidan.com/blog/svg-tips-for-designers/

 

best of luck in your project. :)

  • Like 5
Link to comment
Share on other sites

Shape morphing works best for outlines and silhouettes. For more detailed morphing you would need to do something like @PointC suggested for his horse animation, using multiple steps and paths.

 

In your seedling/tree animation you can change the fill during a morph. To have it multicolored, you would need to use separate paths.

 

The standing/sitting animation would probably look much better if you animated the lady like a skeleton, with joints and all. Break her up graphically into different body parts. You could add a little morph between the different poses, but trying to morph a character's entire body into a different pose will not look good. Here's an example of a skeletal animation. If you look closely you will notice the overlap between the different body parts rotating at joint.

 

http://www.goodboydigital.com/pixijs/examples/12/

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