Jump to content
Search Community

Prepare and Morph complex SVG

Tasty 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

Hello,

I'm a bit lost in Morph magic.

Please take a look on my noob approach  to morph one logo into another - It's messy and it fails on start.

I would love to know how to prepare SVG from Illustrator so that MorphSVG can handle the rest.

I've watched a lot of tutorials about morph, and I experimented with few demos on codepen but all SVG's there are nice and clean - I wonder, how to simplify them to paths?  I'm tired of hitting walls with my head - paint is already falling of - so please aid me a bit, give me some clues, anything ! 

Probably I'm doing something very stupid so be gentle ^_^''



 

See the Pen pgbQEe by Dikus (@Dikus) on CodePen

Link to comment
Share on other sites

Hi Patryk D&D :),

 

It looks like you're trying to go from a group of paths to a group of paths in one morph.

 

The plugin is path to path rather than group to group. You'd want to pick a path in the first logo that would morph to a corresponding path in the second logo and then each of those would become their own individual morph.

 

Take a look at Jack's demo here:

See the Pen WQjRXE?editors=101 by GreenSock (@GreenSock) on CodePen

 

Take a look at the first part of the JS - the first morphs - the M to the cape, H to the torso and so on. There are a lot of smaller morphs happening rather than one large one.

 

You've got a couple of logos there with a lot of individual paths so this will be a bit of work to get them all ready to go, but it can be done. Ideally, you'd want to set it up in AI with individual IDs so you don't have to rename them later. Just think about which path in logo 1 could go to which path logo 2 and name them accordingly. 

 

Hopefully this makes sense and helps a bit.

 

Happy morphing. :)

  • Like 2
Link to comment
Share on other sites

  • Solution

Hello again,

 

I made a quick fork of your pen and made one of the paths into a morph to better illustrate things and help get you started.

 

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

 

I also noticed that you had both logos set to visibility:hidden on your pen. You'd only want to hide the ending path at the beginning.

 

Hopefully this will get you started.

 

Happy morphing. :)

  • Like 4
Link to comment
Share on other sites

Thanks PointC!!!

I just love this place ;) thank you very much for making it clear - now I know how to start, that's all I needed !
It will be a little bit more work/fun than I thought, but it's so much easier with people like you around :)

Thanks again, hopefully I can work this out on my own now. 

  • Like 1
Link to comment
Share on other sites

You're welcome - happy to help. :)

 

Yep - I couldn't agree more - this is a great community of really smart people. I've been helped many times around here.

 

I think you'll be all right now, but you know where the forum is should you run into any more trouble.

 

Happy morphing. :)

Link to comment
Share on other sites

I had dozens of questions and I had found hundreds of good answers here.
First time I'm actually feeling comfortable on forum, everyone just try to help each other - maybe someday I will be able to help others to :D

Thanks to your help I did my first morph that I'm almost proud of 

See the Pen jWrdZO by Dikus (@Dikus) on CodePen

 It's a bit clunky because I had to multiply few elements and use them twice - I bet there's a way to make it smooth, I just need to take a peek on few more demos ;) after a solid nap ;p

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