Menu and Submenu Items Stagger in and out Animation

[jstafford]

Hi,

 

Really struggling to get this working. If there is a simpler way of doing it, I am all ears. 

 

My aim here is that when dropdownLink category is the selected the original working animation on the main menu reverses itself and the dropdown menu items stagger in from left to take their place. When a backLink (topmost choice on submenu) is selected, the submenu items reverse again and the main menu comes back .

 

Struggling , to get the dropdownLink to respond to my click to reverse the mainMenu beginning animation to reveal the dropdown submenu. 

 

I am very aware now of multiple timelines having the possibility of acting on the same property, but not sure this is the case.

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

[jstafford]

Hmm...I may have a confusing question.

I am going to try and further reduce this codepen. Using one timeline, if menu element has class "selected", it staggers into view and if menu element does not have class "selected" it staggers out of view.

 

I am going to use one timeline that works with class "menu" and "selected" to stagger in and out the menu containers based on whether backLink (top most container of either dropdown menu; ushers current dropdown menu out and main menu back in) or dropdownLink (2nd and 3rd container of main menu; click of either one ushers main menu out and ushers in respective dropdown menu) is clicked .

 

I will give this new one timeline version a shot in a few hours. By the way, the red and blue background color of the dropdown link containers of the main menu corresponds to the respective dropdown menu container colors that will stagger in from left when a dropdownLink is clicked.

[Carl]

Yes, please reduce it as much as possible and please consider adding some comments to your code and instructions on how we are supposed to interact with the demo. 

 

I read your first description

 

My aim here is that when dropdownLink category is the selected the original working animation on the main menu reverses itself and the dropdown menu items stagger in from left to take their place. When a backLink (topmost choice on submenu) is selected, the submenu items reverse again and the main menu comes back .

 

But then I looked at your demo and saw a few different colored rectangles that didn't do anything when I clicked on them and 50 lines of JavaScript.

I really struggle to understand what you mean by dropdownLink, backLink, or submenu is. We will do our best to help you with GSAP-related questions but unfortunately we don't have a lot of time to be deciphering a lot of code just to try to understand the problem.

 

For your next demo, please try to reduce it to only the code necessary to replicate the problem. Also it would help to remove any unnecessary interactions and logic like toggling classes and trying to determine whether or not something is clicked. Do something really simple like "click the red button to make case A happen and click the blue button to make case B happen". After you know how to trigger the proper animations you can add that logic and stuff back in.  Thanks.