Jump to content
GreenSock

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

Greensock, Z-Index, Pointer Events

Go to solution Solved by Carl,

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

Here is the setup, 95% of which is already working.
 
"#mainMenu" is the main menu and has two dropdownLinks, "#dropdownCategory1" and "#dropdownCategory2" 
 
"#submenuCategory1" (red color) is the first submenu that is triggered to come into view by the "#dropdownCategory1" (red color link) in the #mainMenu 
 
"#submenuCategory2" (blue color) is the second submenu that is triggered to come into view by the "#dropdownCategory1" (blue color link) in the #mainMenu
There are two backlinks:
 
"#backLinkCategory1" is the topmost red container that if clicked sends you back to main menu from the "#submenuCategory1" (red menu)
 
"#backLinkCategory2" is the topmost blue container that if clicked sends you back to main menu from the "#submenuCategory2" (blue menu)
 
You can see a working prototype of this "inter menu animation" here.

See the Pen EPEPqz by jstafford (@jstafford) on CodePen

 
I am trying to integrate it with it with this page transform animation as well. Again, the page transform works fine. 

See the Pen dGmMPG by jstafford (@jstafford) on CodePen

 
However, when integrating the two here:

See the Pen yevGzv by jstafford (@jstafford) on CodePen

, I run into problems with the html, body layer masking pointer events on the submenu. Really not sure how to solve this and keep the page transform and inter menu animation effects both working together.

 

See the Pen yevGzv by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

Just a little tip for the the future: it would help just to put the text like " open menu 1" in the proper div so that we don't have to reference a legend to decode what the blue and red divs do.

 

http://codepen.io/GreenSock/pen/MKVezJ?editors=1010

 

That being said, yes there seems to be an issue related to z-index. I'm not sure of the solution, but what I understand of the layout I'm not convinced that setting z-index on a bunch of elements is necessary. I think things would be easier if all menus and sub menus shared the same parent div. 

<div id="site"></div>
<div id="menus">
  <div id="mainMenu"></div>
  <div id="submenuCategory1"></div>
  <div id="submenuCategory2"></div>
</div>

if for some strange reason you do need a z-index you should only need it on #site and #menus

 

 

  • Like 2
Link to comment
Share on other sites

worth noting, you can see that when the background is set to a color, it indeed blocks out the submenu. fairly sure my problem has to do with figuring out a way to get the page transform to occur without including the menu stuff in the html and body. my attempts so far have proven unsuccessful.

 

See the Pen QymKLK by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

I was posting this followup right as you posted Carl. I will try your suggestion. I removed the "open menu" stuff as it wasn't part of this problem here. The red and blue was just a way to color code which link in the main menu fetched the corresponding submenu. I tried to be a clear as possible. I will do my best to help you as much as I can.

Link to comment
Share on other sites

Carl, this is what happens when I put the menus under the same parent site div and remove z-indexes from menus.

 

See the Pen VeXKKO by jstafford (@jstafford) on CodePen

 

Menu animation indeed works, but elements are not layering as expected. Is there a way to take care of this without z-index? And yes, the page transform barely makes it into view at the bottom.

Link to comment
Share on other sites

  • Solution

ok, it seems the solution involves

 

  • setting position:absolute on all menu containers
  • managing the autoAlpha (or visibility) of those containers

 

I added some stuff like

 

if($(interMenuLink).is("#dropdownCategory1")) {
        TweenMax.staggerTo($("#mainMenu .container"), 0.5, {
          autoAlpha: 0,
          x: -200,
          ease: Back.easeIn
        }, 0.125);
     //new from carl
      TweenMax.set("#submenuCategory1", {autoAlpha:1});
      TweenMax.set("#submenuCategory2", {autoAlpha:0});
      TweenMax.staggerTo($("#submenuCategory1 .container"), 0.5, {
          delay: 0.625,
 autoAlpha: 1,
          x: 0,
          ease: Back.easeOut
        }, 0.125);


      }

and then when you close sub menus and the main menu items stagger back in I added an onCompleteAll

TweenMax.staggerTo($("#mainMenu .container"), 0.5, {
          delay: 0.625,
 autoAlpha: 1,
          x: 0,
          ease: Back.easeOut
        }, 0.125, hideSubs);

function hideSubs(){
   TweenMax.set("#submenuCategory1", {autoAlpha:0});
   TweenMax.set("#submenuCategory1", {autoAlpha:0});
}

http://codepen.io/GreenSock/pen/QymKMv?editors=0100

  • Like 3
Link to comment
Share on other sites

Wow Carl ! I am glad I reached out for help.  Slight correction on your awesome answer. 

See the Pen xZWRZK by anon (@anon) on CodePen

 

I think you were wanting to hide both submenuCategory1 and submenuCategory2 in the hideSubs() function.

 

I will digest your answer some more, but one question for now before I tinker with it. You are only setting the actual menu with autoalpha, not $("#menu .container") . I guess it still works b/c of the cascade down to the smaller elements within the menu div (i.e. containers).

Link to comment
Share on other sites

Hmm...it only works the way you wrote it. So, you are changing the autoalpha on the menu and the containers 

 

Also, I was thinking about your change from pointer events to autoalpha. Will this be better supported using Greensock's autoalpha? I was looking at the browser statistics a few days ago, and the internet explorers that can't support pointer events (ie 10 and less) are a very small fraction now. http://www.w3schools.com/browsers/browsers_explorer.asp

 

It is still nice to use autoalpha if it can support those remaining ie 8-10's that are still being used.

Link to comment
Share on other sites

Sorry, I can't really speak to support of pointer events. I just know that since autoAlpha:0 sets visibility:"hidden" and opacity:0 those elements in all current and old browsers will not respond to events. 

  • Like 2
Link to comment
Share on other sites

To add to Carl's great advice.. if you really need support of pointer-events for IE10 and below, you could try and use this JS solution as a workaround.

 

See the Pen BriCb by jonathan (@jonathan) on CodePen

 

It checks against pageX, pageY, mouseX, mouseY, and element offset to allow or disallow pointer events on an element.

 

Keep in mind CSS pointer-events will not work in IE11 unless the CSS display property is set to block or inline-block.

 

:)

  • Like 1
Link to comment
Share on other sites

Thanks Jonathan and Carl ! I had no idea about the display property set to block or inline-block. I was building upon what Carl helped me out with yesterday and I ran into a problem that is confusing to me.

 

See the Pen eJMrrr by jstafford (@jstafford) on CodePen

 

I expanded my submenu items to the actual # that I will be using in production and felt that breaking the 14 items in the red submenu into two columns looked a little better. The animation works fine going going from the main menu to the blue submenu and back, but for the red sub menu it has problems with the backlink being clickable (red sub menu to main menu has problems, main menu to red sub menu works fine). I am sure I am dealing with a autoalpha being off, but I don't see it or understand it.

 

Again, backlinks on the red submenu is top one of the 1st column and blue submenu backlink is top one of only column. 

Link to comment
Share on other sites

well, just going with the single column category 1. if you guys are too busy for this, I understand.

Link to comment
Share on other sites

Yeah, sorry, I don't really have time at the moment to dig into this again.

Link to comment
Share on other sites

If you inspect the elements, you'll see that your back link won't work because #submenuCategory1Col2 is sitting on top of #submenuCategory1Col1. You've only moved the child divs of the 2nd column. The 2nd column itself is blocking the 1st column from the click.

 

Add these at line #51 of your JS and the problem will show itself to you. 

TweenMax.set("#submenuCategory1Col2",{background:"yellow"});
TweenMax.set("#submenuCategory1Col1",{background:"green"});
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.
×