Greensock, Z-Index, Pointer Events

[jstafford 23 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

 

 

[jstafford 23 Likes (Newbie)]

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

[jstafford 23 Likes (Newbie)]

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.

[jstafford 23 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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

[jstafford 23 Likes (Newbie)]

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

[jstafford 23 Likes (Newbie)]

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.

[Carl 9,066 Likes (Superhero)]

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. 

[Jonathan 5,176 Likes (Superhero)]

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.

 

[jstafford 23 Likes (Newbie)]

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. 

[jstafford 23 Likes (Newbie)]

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

[Carl 9,066 Likes (Superhero)]

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

[PointC 8,599 Likes (Superhero)]

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"});

[jstafford 23 Likes (Newbie)]

Thanks PointC. Tricky stuff.