Menu Stagger Animation

[jstafford]

Hi,

 

I greatly reduced my last codepen and I am reaching out for your help on this. Pretty straight forward problem here.

 

1) #mainMenu is the main menu and has two dropdownLinks

 

2) #submenuCategory1 - first submenu that is triggered to come into view by the #mainMenuCategory1 dropdownLink in the #mainMenu 

 

3) #submenuCategory2- second submenu that is triggered to come into view by the #mainMenuCategory2 dropdownLink in the #mainMenu 

 

 

     #mainMenuCategory1 (red color) triggers the staggering in from the left of the #submenuCategory1 (matching red); main menu staggers back to the left

 

     #mainMenuCategory2 (blue color) triggers the staggering in of the #submenuCategory2 (mathcing blue); main menu staggers back to the left

 

 

I initially set the #submenuCategory1 and #submenuCategory2 off screen and stagger the mainMenu in when the page loads

 

I expect when you click either  #mainMenuCategory1 or  #mainMenuCategory2 it would trigger my callback to initiate this animation, but nothing happens

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

[jstafford]

Hmm....I may be dealing with a click event happenning on the container element and not on the ".interMenuLink" element like I was expecting.

[jstafford]

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

; new codepen here. Got it working to where the main menu staggers out to the left, but neither submenu staggers in from left when their respective dropdownLink is clicked in the main menu?

[jstafford]

Also, don't worry about the backlink part yet. I am doing that next. I am just focused on the mainMenu --> submenu1 and mainMenu --> submenu2 animations right now. Pretty sure this last question is a real Greensock question b/c my javascript code is being hit as expected but the TweenMax is not doing what I expect? 

 

I initially set each submenu offscreen with the following init() function :

 

  TweenMax.set($("#submenuCategory1"), {

  autoAlpha: 0,

  x: -200

});

TweenMax.set($("#submenuCategory2"), {

  autoAlpha: 0,

  x: -200

});

 

 

To bring them back in when their dropdownLink is clicked I do the following, but nothing is happening.

 

 TweenMax.staggerTo($("#submenuCategory1 .container"), 0.5, {

          autoAlpha: 1,

          x: 200,

          ease: Back.easeOut

        }, 0.125);

      }

 

 

 TweenMax.staggerTo($("#submenuCategory2 .container"), 0.5, {

          autoAlpha: 1,

          x: 200,

          ease: Back.easeOut

        }, 0.125);

      }

 

[PointC]

You're setting the parent div (#submenuCategory1) to x:-200, but you're trying to animate the children of that div (.container) back into view. The parent is still siting at x:-200. Try changing your .set() to this:

  TweenMax.set($("#submenuCategory1 .container"), {
  autoAlpha: 0,
  x: -200
});

I also see that your sub-menu .containers are animating to x:200. That may be intentional, but if you want to bring them to the same point as your main menu, you'll want to animate to x:0.

[jstafford]

thanks PointC. Yes, I am still new to the x and y . Intuition would tell me the x:200 would move it positive 200 relative to the right of where it is (in the case -200). I guess it is more absolute. Not sure why I didn't find the .container you just mentioned. Thanks again.

 

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

 

The above codepen takes into account what you told me but I still don't understand a few things. Why is an interMenuLink element getting inside both conditional blocks and triggering both submenus to appear? I am trying to gain as much javascript knowledge as I can, but I don't understand what is going on here? 

 

There are two elements with class interMenuLink, one with #mainCategory1 id and the other with #mainCategory2 id. Selecting one should cause only one submenu to appear?

[jstafford]

doh! closing tags on my submenus were off.

 

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

 

Last question, I am switching my autoalpha to 0 when things stagger off screen. Shouldn't he new stuff take up the top left most space when it comes in? Do I need to go to a display of "none" . Autoalpha deals with display: "hidden" and opacity: 0 . So, things still take up space. I would like it to be so that things enter and leave at the top, not where they are introduced in the DOM.

[jstafford]

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

; z-index to layer each menu proved to be the solution on last part