greykrav

I followed these directions, I found that the above added even more extraneous group names, I understand how to morph from one path to another however I am still not understanding how to morph an entire svg, since it doesnt allow morphing from groups, and for aything other than simple shapes the above method results in creating groups that might contain many paths, how can we get a group that contains many paths to morph into another group that might also contain many paths?

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 codepen. I have attached the png of the logo im trying to morph to.

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: Fill Spill over pen

Thank you for the solution and all the helpful information! I am researching the methods you recommended right now. I have run into some other questions about morph so ill make a new thread..

Good evening everyone. I am having problems getting this function to run repeatedly, I wish it to run every time on mouseenter and reset itself on mouseleave, however its only running once. Also I was looking for tips on how to achieve the GOOEY morphs I see everyone doing, as well as the water ripple morphs seen in this pen All advice and tips welcome. Thank you.

Good evening, I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? any advice appreciate. thank you.