Morph Svg fill of first path is becoming fill of second path.

[greykrav]

Happy holidays everyone. I am Trying to make a map svg icon morph into a logo. The problem Im having is that the fill of the first path (Map) is becoming the fill of the second path (logo), and completely blocking out the logo. 

I read this thread: morph svg groups

and followed the instructions on this thread to get the from png to svg illustrator convert to svg

 

I noticed that in illustrator that from the steps of expand to object->compound path->make 

the converted svg looses its fill. ive also noticed that there is  also a square border around the actual logo svg, and when you try to change the fill in codepen, it just fills in the entire logo into one color. 

 

Ive also seen that illustrator has alot of extraneous <g> I understand that these are useless to greensock, because morph svg can only convert path to path. I should mention i am not experienced with illustrator or photoshop, however I recently purchased the adobe cc membership and I see a ton of resources through them, but no tutorials on how to optimize and prepare svg's for working with morph or greensock animations. I see that naming the layers will give an ID to the G elements which is useless to us? Can someone please outline their png conversion to svg and then morph workflow.  Should I rather just create a layer and trace over the logo png in illustrator, then delete the png, and not even bother with the auto trace? When would you do one vs the other? and why is the fill color of the first svg spilling into the entire viewbox? 

 

So to recap, the morph is working, but i must be doing something incorrect with the preparation of the svg  all advice appreciated.

 

Edit: I realize I included the first pen, Where i actually did trace the logo but it wasnt morphing nicely, here is the second pen I created ( where I used the autotrace feature of illustrator) you can see what I mean by the fill spilling over: 

See the Pen OavOYg by kravmaguy (@kravmaguy) on CodePen

 

See the Pen BGYqLX by kravmaguy (@kravmaguy) on CodePen

Edited November 22, 2018 by greykrav
adding information

[PointC]

Hi @greykrav 

 

Welcome to the forum.

 

You're morphing the #Map into #Logo1, #Logo2 and #Logo3, but there are no paths with those IDs so that won't work. In this fork I've commented out the last tweens and only use the first one that morphs from the map to the logo.

 

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

You can animate the fill color along with the morph. As you can see in my fork, I've just used red. Regarding the trace feature of AI to convert pngs to SVG, my advice would be not to do that. IMHO you'll be far better off by creating a new vector graphic by manually tracing over your original artwork. You'll end up with a cleaner output and you can properly layer and group elements.

 

Check out this thread for some more info about AI exports.

Hopefully that helps. Happy tweening.

 

[greykrav]

Happy thanksgiving craig,

Thank you for your guidance. 

 

I am still confused about the following, maybe this is all related :

1. I am referencing your pen yet having difficulty adding fill in the outer ring of the logo (the area in between the outer two ellipses) I also tried adding stroke ( didnt work for me either).  How can I achieve this? 

2. In your example the polygon (triange) which cuts out the space in the middle of the letter 'A' under the 'G' also gets the fill, how can we give it a different fill or fill ? 

3. I still did not understand why in this codepen ( this is the one where i followed nicks protocol and used the trace feature) the fill from the first svg is spilling out and covering the entire canvas of the second svg, see this

See the Pen OavOYg by kravmaguy (@kravmaguy) on CodePen

. I have attached the png of the logo im trying to morph to. 

 

[mikel]

Hi @greykrav,

 

First of all: Your SVG rejects an error message.
Probably vectoring problems (too many layers?) .

If you start the animation with a delay, an error will be displayed (I use CHROME):

 

See the Pen oQqJYx by mikeK (@mikeK) on CodePen

 

You can define stroke and fill in the 'morph tween'.

 

Here is an option, have taken one layer of your logo and set new circles:

 

See the Pen yQKQqK by mikeK (@mikeK) on CodePen

 

Try to optimize the SVG.

 

Best regards
Mikel

[PointC]

The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here.

 

I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it.  

 

With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles.

 

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

 

 If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that.

 

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

The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. 

 

Happy tweening.

 

[mikel]

Hi @greykrav,

 

It's BlackWeekend ...

 

See the Pen MzGezG by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

[greykrav]

@mikel

Yes your answer is the best way to do it, 

I will have to study this animation you made. I am not skilled enough to create anything original. Here is your splashscreen on a Map w/ Mapbox api 

See the Pen aMJbYx by kravmaguy (@kravmaguy) on CodePen

 

I want to know if there is a way to create custom animation objects and geolocate them on the map? This example is from the mapbox documentation, the only thing I did do was add the tooltips on hover when you hover over the extrusions of the building, If you want to draw your own extrusions with the mapbox Api what you can do is to geolocate a spaceplan raster image using CQGIS and then draw on top of it your walls ceilings etc.. How would you geolocate a gsap animation?