adamoc Posted May 23, 2020 Share Posted May 23, 2020 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 More sharing options...
PointC Posted May 23, 2020 Share Posted May 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 sorry i was just playing around with trying to see if my theory was correct i'll put it back to what it is now , just me a sec Link to comment Share on other sites More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 okay it's like it was now , if you could take another look thanks Link to comment Share on other sites More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 Also I have the text element path at the bottom of the SVG i want it to morph to already Link to comment Share on other sites More sharing options...
PointC Posted May 23, 2020 Share Posted May 23, 2020 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. 3 Link to comment Share on other sites More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 @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 More sharing options...
PointC Posted May 23, 2020 Share Posted May 23, 2020 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. 2 Link to comment Share on other sites More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 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 More sharing options...
adamoc Posted May 23, 2020 Author Share Posted May 23, 2020 It's grand i figured it out , I don't need it to repeat so therefore won't see square coming back , thanks so much . Until next time Craig 🤙 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now