Streaming live at 10am (PST)

Menu of interactive drawers


#1

I’ve been trying to create a menu like these that would function like a set of drawers, in which interacting with one drawers trigger would target other open drawers to animate closed before animating the selected drawer open. I have tried setting this up using various components as well as a bunch nested div blocks with customized interactions but I always run into a roadblock eventually. For example, click/tap interaction being “1st, 2nd click” based creates a potential problem on the third click. I feel like I need a “on/off state” based function that can determine which drawers are currently open/closed before animating them appropriately open/closed. Are there any ways you can think of to go about this?


#2

Hey @LuciDian

I think I understand your request and have a solution I’ve used before. You need 2 separate click triggers on the same element. Do NOT use the 2nd click function.

Trigger A

  • Length: Z
  • Use class targeting to close ALL elements of that class

Trigger B

  • Delay: Z (Important that trigger A is finished)
  • Use class targeting to open ONLY target selected element

Hope that helps. Happy designing!