Streaming live at 10am (PST)

Hamburger animation misbehaving


#1

Hi there, I have a hamburger icon that turns into a cross, and back on second click. The problem is that if I clicked any of the menu items, which closes the menu, the cross remained a cross. So I put an interaction on the menu items to turn the cross back into a hamburger. This works, but now the animation doesn’t happen when I click the hamburger after I’ve used a menu item to close it, because it is not considered a 1st click. After that the hamburger/cross open/close is out of sync.

Anyone got a solution for this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @mimfox,

Yes it’s a bit counter intuitive but I have a work around.

Basically for this kind of interaction that can come from multiple triggers, it is better not to use the second click as it is the reason things are out of sync.

The idea is to use an extra div for triggering the close interaction.

Here is how :

Layout:

  • Wrap your button into another div (button wrapper for example)
  • Position and size this div the way you did with you animated button
  • Add an extra div inside this wrapper (close trigger)
  • Set your animated button and the close trigger to position absolute and pin to 4 sides
  • Make sure the close trigger have a higher z-index than the animated button

Interaction:

  • The open interaction should include the showing of the close trigger (add an initial state of hidden as well)
  • The close interaction should include the hiding of the close trigger
  • Set your button animated to have the first click set on open menu (no second click)
  • Set your links and the close trigger first click interaction to close menu (no second click)
  • Now everytime the menu icon open, it will display (but transparent) the close trigger on top of the button animated and therefore be on sync

I join some screenshots to further illustrate but it’s not so hard to grasp

09 21

I hope it will help you where I struggled for a while :crazy_face:

Max


#3

Thanks so much! Will give that all a try!


#4

I finally got around to trying this out and it works bloody beautifully! I had put it in the too-hard basket for the last couple of weeks, but then took it one step at a time and your instructions were so clear and helpful. Thank you so so much.