Jump to content
GreenSock

Learning

zIndex issue from scaling

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

EDIT: Oops guys, after the z-index issue first occurred, I have been moving things around and causing this issue to deepen, after deleting everything and starting over, I realised it works already as long as I don't scale from the top element but the inner child! =x Perhaps the admin can help me close/delete this thread? Sorry for the trouble guys!

Hi guys,

 

I've searched the forum and found 1-2 similar topics, but I don't really understand the solutions...
So I thought maybe I'll try to ask this question again. Really sorry about this!

 

So I have a dropdown menu that has a z-index of 10 (so it's above everything) and visibility of hidden.

When I click on a hamburger icon, I used TweenLite to scale it up from 0 to 1 and set the autoAlpha to 1.

This caused the z-index to reset to 0 and thus the dropdown menu appears behind other elements on my page.
 

I have tried including zIndex into my tween, but even if the element.style shows it's z-index 10, the computed z-index stays at 0.

I have also tried using clearProps mentioned in one of the previous threads, but it didn't seem to affect anything too. =(

 

I understand from the other thread that scaling (transform matrix) will automatically reset the z-index (which is what is causing this issue I'm guessing), but doesn't tweening the zIndex help? Do I have to put my menu at the bottom of my body of every page to make this work?

Thanks in advance again guys!

Link to comment
Share on other sites

It would be very helpful if you could take a few minutes to set up a reduced test case as explained here: 

 

 

One option might be putting your menu inside a parent container div with the higher z-index. Once we can see a small demo we will be better suited to provide a solution that works in your particular scenario.

  • Like 1
Link to comment
Share on other sites

Hi Carl,

 

Thanks for the reply. Yeaps, after deleting and resetting everything, I realised that if I wrap the div inside a container and deal with it, it works already! I guess in trying to solve it, I had written too many things and messed it even further, that's why it got really confusing in the end. Sorry for the trouble!

Link to comment
Share on other sites

No trouble at all. Glad you got it working. 

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