Disable default menu animation

Is there a way to disable or get around the default nav behaviour? i.e. dropdown, over-right, over-left. Had the same problem with quite a few sites where I try to animate something interesting with the menu and have the same problem where the menu does both animations.

Appreciate that I could rebuild out the nav, but then I lose the “navbar open/close” state for interactions.

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

Sorry to bump this but does anyone have any advice?

Hey @DavidFerguson have you tried setting the timing of the default duration to 0ms? That will make the default animation instantaneous. If that doesn’t help, I’d be interested in seeing the project and better understanding what you’re trying to achieve so I can give better advice.

Hi @matthewpmunger,

I’ve tried that unfortunately. It works perfectly when the menu is opened but shuts it immediately on exit so there’s no way to do an exit animation!

At the moment I haven’t built out an animation for my current project as I’ve been aware of this issue in the past. Was hoping to see if anyone had any tips before I started on something that would be limited anyway

I have three columns in the nav which I’d like to animate in individually by sliding up or down from top/bottom of the screen then have the text fade in.

1 Like

So, after quite a lot of trial and error I’ve finally figured out how to do this, posting here in case anyone has the same problem.

The solution seems a bit painfully obvious now but all you need to do is build out your nav to not be inside the nav menu element - or delete it entirely and make a new one.

You’re still able to access the “navbar opens/closes” interaction to animate, so if you create a new element to hold your nav menu, you can then animate that when the button state of the menu button changes! So you won’t then have to deal with the default navbar animations getting in the way.

1 Like