Need help with nav animation please

Greetings everyone, thanks for checking this out. I’ve been needing some help for a while on this.

First off: heres a GIF of the issue I’m having. I explain what’s happening a little clearer below. new

When you click my hamburger Nav for the first time after a page load, the dark background that is supposed to softly fade-in, does a harsh visual stutter and jump before fading in, and then once you close the side nav for the first time, the content of a separate tab appears in at 100% opacity and looks jumbled, ( this happens quickly as the nav is closing )

however, on any subsequent clicks of the hamburger menu, its all fixed for some reason. The dark background smoothly fades in and when you close the nav the content doesn’t appear anymore.

Is this something I did wrong in creating the animations? Or is this an issue with webflow?

Thanks again

published site link:

read only link:

You’re missing an initial state on the gray bg. Your first round of IX sets it back to 0% opacity, that’s why the subsequent clicks make it work as expected. but on firts run, your series of IX just set it to 45% opacity straight.

Nice effect. You can do this with 1 IX only. For efficiency, easier maintenance and solidity, try to avoid setting several IX triggers on the same element.

Man thank you vincent! Appreciate the fix, and the advice.

1 Like

hey vincent can I ask you how you uploaded such a clean video to show your process of fixing the issue? is that just a screen recording?

Yes, I use Monosnap (but it became recently quite expensive, so I don’t really recommend it) and it upload the video automatically on my server (it can host it in its cloud too).

There’s also apps such as CloudApp that are doing the same quality job.