Setting z-index before morph tween

[kathryn.crawford 11 Likes (Newbie)]

I've got an overlay that I have moved to the back of my page, so that it doesn't block my hover animation on the 2 circles.

#open {
   visibility: hidden;
   z-index: 1;
}

When I open the overlay, I need it moved to the top, so that it will cover the circles, and also block their animation. My set doesn't seem to have any effect though. 

tl2.set('#open', {zIndex:5})
  .to("#closed", 1, {morphSVG:{shape:"#open"}})

I've tried moving the set around the tl as well. It doesn't seem to work no matter where in the timeline I put it. I figure I probably want it at the beginning though, so that the morphSVG animation covers up the circles immediately.

See the Pen JYBRVR by kathryncrawford (@kathryncrawford) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello kathryn.crawford, and Welcome to the GreenSock Forum!

 

Try this:

 

See the Pen xwJJEz?editors=001 by jonathan (@jonathan) on CodePen

 

You would need to add an id to the parent SVG tag of your open and close overlay. I gave it a id of #overlay
 

<svg id="overlay" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 600 600">
  <path id="open" d='M0,0 L600,0 L600,600 L0,600 Z'  fill="#BBE8FF" opacity="0.75"/>
  <path id="closed" d="M0,0 L600,0 L600,600 L600,0 z" fill="#BBE8FF" opacity="0.75"/>
</svg>

Then you would need to add the z-index to that SVG tag instead. Then increase the z-index on your #close element.

tl2.set('#overlay', {
    zIndex: 5
  })
  .set('#close', {
    zIndex: 6
  })

What was happening is you were adding z-index to a child of an absolutely positioned element. Even though the parent has position absolute. It is not inherited due to the stacking context of CSS and SVG child elements. You were trying to have an nested absolutely positioned child of a absolutely positioned parent override the stacking context of an element outside that SVG tag.

 

What i would do is when you first setup your page. First setup your elements in the position you want with the z-index inside your style sheet. And then use GSAP to animate elements in and out. This way all your elements are positioned with the correct z-index. Sometimes also changing the order of the elements helps too. But as a rule of thumb. Any time you have a parent element have position absolute and its child have position absolute, especially in SVG there will be an issue due to the way z-index works and its the way it is inherited.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

 

Also just a helpful tip. Any time you use position absolute, you should have a parent element that its relative to, with position:relative. This will give you greater control in positioning elements absolutely, and allow z-index to work properly cross browser.

 

What i would do is rework your elements so you wont need to use JS to change the z-index. So the z-index would just be inside your CSS. And be careful about nesting absolutely positioned elements with z-index, especially in SVG, because it will cause issues cross browser.

 

[kathryn.crawford 11 Likes (Newbie)]

Thanks Jonathan! Looks like I need to review positioning.