Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chris

z-index issue when animating a container

Go to solution Solved by Ihatetomatoes,

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

Hello,

 

I'm running into an issue with z-index when animating a container that has a button in it.

 

See codepen:

 

I want to animate the #containerDiv. Inside is a #buttonDiv with a z-index of 2000 so it's at the very top. Problem: As soon as the parent div gets animated (by clicking the #buttonDiv) the z-index changes and the #blueBox gets moved to the top.

 

How can I keep the button at the top without changing the order of the divs in the HTML?  I know when a div has no z-index when animated, it automatically gets "0". So in this case it will move the #containerDiv (incl. the button) back, behind the blue box. I just wonder if there is any way to avoid this and keep the original order.

 

Any help would be great!

See the Pen KdpwBj by treemok (@treemok) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Chris, this might be tricky without the restructuring the html. The one thing is to add clearProps: 'all' to your tween, that will keep the button on top after the animation is completed.

TweenMax.to("#containerDiv", 1, {rotation:"+=360", clearProps: 'all'});

See the Pen 019f7be746259e452b71d568c98ed5c5 by ihatetomatoes (@ihatetomatoes) on CodePen

 

You are probably trying to keep it at the top even during the animation, I don't think there is a quick solution for this, unless you restructure the html.

 

Is there any reason why you can't create a simple html with 3 separate layers to achieve this effect?

  • Like 2
Link to comment
Share on other sites

If you test in Chrome, you will see that GSAP is not setting a z-index to any elements and the blue box still goes on top of the red one.

In chrome if you animate non-transform properties you will see that the no layers get moved around: http://codepen.io/GreenSock/pen/RWPGbK

 

In both Chrome and FireFox, once you set a transform on an element it will impact the layer order.

 

--

 

However, in Safari, GSAP does add the z-index:0 and this does force the layering to change. Removing the z-index:0 from the inline style does appear to set the layer order back to what you had BUT it also removes the setting of the transforms. In other words, safari absolutely needs the z-index 0.

 

--

 

Like Petr said, I think this requires re-structuring your html.

  • Like 4
Link to comment
Share on other sites

Thanks for your help! I think at this point it might be useful to explain what each element actually is:

 

#containerDiv = video player

#buttonDiv = video navigations

#blueBox  =  background clickTag button

 

Its much easier to keep the video player and the video navigation grouped to be able to animate them together (in 3D space in this case actually). But the clickTag button has to be behind the video navigations but on top of the player.

 

I guess "clearProps: 'all'" is a workaround but that means I can't click on any video player buttons while it's animating.

Link to comment
Share on other sites

Well, "clearProps: 'all'" wouldn't work actually if I want to animate the div to a new position: 

See the Pen EVjNEb by treemok (@treemok) on CodePen

Link to comment
Share on other sites

Ok, guys. I was just a little too optimistic hoping the z-indexes would always stay the way they were defined in the CSS - even when animated. I reordered the html divs (and my brain) and now all works fine. Thanks!

Link to comment
Share on other sites

Great to hear that you got it to work the way you want.

 

The explanation of what each element actually is (video player and controls) is very useful, that way we can steer you in the right direction.

 

Good luck with your project Chris.

Link to comment
Share on other sites

Hello Chris.. anytime you animate an element, depending on the CSS propertie(s), it could give your element a new stacking context (meaning its own rendering layer) regardless of z-index, stacking context is different than your z-index. you could even try and put z-index one million, and still the stacking context wouldn't change, unless you create a new stacking context for your non animated elements.

 

this MDN article on stacking context could help you get it to work, since I'm not at a computer right now

 

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

 

I hope this helps :)

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

×