Jump to content
Search Community

Setting z-index before morph tween

kathryn.crawford test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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"/>

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.




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.



  • Like 4
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...