Jump to content
Search Community

MorphSVG Between One Shape with Many and Another Shape with Text (StackOrder Problem)

adamoc test
Moderator Tag

Recommended Posts

Hi there , 

Adam here and to say I'm amazed at the capabilities of this library would be an understatement of epic proportions , fair play everyone here this is savage 🤙

So , My animation I want to perform is almost complete but I'm having terrible trouble with the text on the morphed into shape(my company logo) . I can see it's being morphed and i'm guessing it's a zIndex and bring to Front problem but I can't quite figure out why it won't come to the front , I've tried all normal methods which normally work but to no avail . My only guess would be that it is actually coming to the front but because i'm animating all the different shapes to the background to create the effect this is invariably doing lets say , one background then text then all other backgrounds . This is what I think is happening although I would love some one to have a look for me please

See the Pen pojYrNE by Adamoc (@Adamoc) on CodePen

Link to comment
Share on other sites

Hi @adamoc :)

 

Welcome to the forum. 

 

There is no z-index with SVG child elements. You can have separate SVGs and give them a z-index. I'm not sure I follow your entire animation, but you could move the text element paths to the bottom of your SVG so they'll naturally be on top.

 

Does that help?

 

Happy tweening and welcome aboard.

:)

 

  • Like 1
Link to comment
Share on other sites

You need the original shape (your ellipse) to be at the bottom of the SVG. The original shape is just morphing to the attributes of the text path. The stacking order will not change.

 

This needs to be at the bottom:

<ellipse class="Salmon_Bottom_Oval textShape" cx="143.233" cy="312.25" rx="23.265" ry="47.787" transform="rotate(44.972 143.233 312.25)" fill="#F89685" />

I made those changes and forked your pen.

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

 

I also updated you to the new GSAP 3 syntax.

 

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

@PointC

Ahh sound , now i get you . So although i actually positioned the shapes in HTML in the order i wanted it to render it doesn't matter what order those shapes are in because it's math so the renderer will follow the paths unlike normal HTML where stack order does matter. I updated the synthax to the GSAP 3 and moved the square instead to the end so that the text comes in the middle which is perfect , would never have thought of this thanks so much Craig. 

See the actual resulting animation below: 

 

https://cdpn.io/Adamoc/debug/pojYrNE

 

See the Pen pojYrNE?editors=1010 by Adamoc (@Adamoc) on CodePen

 

Just one more question anyway I could hide the square so that it's not visible to human eye that the square is morphing ? Even only on the way out ?

 

 

 

Link to comment
Share on other sites

  • adamoc changed the title to MorphSVG Between One Shape with Many and Another Shape with Text (StackOrder Problem)

Happy to help. Looks good. 👍

 

Yeah, morphing can cause a little bit of confusion as I know some users assume the original shape morphs into the new one and now we're looking at the new one, but that is not the case. In fact, most often you'll set the morph end target shape to hidden in your CSS or place it in the <defs> so it won't render. 

 

Glad you got it all sorted. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Just one more question any way I could hide the square so that it's not visible to human eye that the square is morphing ? Even only on the way out ?

Is what you said what I need to do with the square?

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...