Problem with my custom Burger animation

Design help Animations & Interactions
1

Hi there!!

I am currently working on my personal portfolio website and wanted to create a custom burger animation.

The animation on its own works well, it opens and closes the menu and it does its rotation and back to normal when you click the burger. The problem comes when I am clicking on a Menu Link, then the burger will stay on the “X” mode and not return to its original form.

I have tried to animate the Menu Link to animate back the Burger and it worked. But when I click again on the Burger it does not animate to look like an “X”.

I think that Webflow is treating the animations independently and it is not trigging the second click on the Burger when I click on the Menu Link. I am thinking in doing some custom JS, but really wanted to know if there is a work around not using custom JS.

Any ideas??

Thanks in advance!!!

https://preview.webflow.com/preview/my-sandbox-33e88e?utm_medium=preview_link&utm_source=designer&utm_content=my-sandbox-33e88e&preview=ca3042315baf2f0e0e3a45e9d61f457c&workflow=preview

Here is my public share link: LINK
(how to access public share link)

2

Hi @Pau_Ferrer thanks for your post.

I would change the trigger of the animation, currently it is a mouse tap on the burger menu.

I would change that and select the Navbar and create a new interaction to trigger when the navbar opens and closes, and set the existing burger animation open and close actions to the new interaction navbar opens and navbar close steps and remove the interaction trigger from the Burger Menu.

Here is a quick video:

I hope this helps

1 Like
3

I would like to change the trigger of the animation , currently it is a mouse tp on the burger menue.

4

Hey @cyberdave !!
I didn’t know that bit for the navbar!! Thanks for that!! I will try and let you know!!

5

It worked!! Just had to remove also the animation I had in the Menu Links and all working smoothly!! Thanks @cyberdave !!

1 Like