Animation error on first click. Subsequent clicks are fine

Greetings everyone, thanks for checking this out.

First off: heres a GIF of the issue I’m having. I explain what’s happening below that. 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


read only link : https://preview.webflow.com/preview/alexanders-first-project-eadf69?utm_source=alexanders-first-project-eadf69&preview=63a453e904dfac855e1b352651025206&mode=preview

published site link : https://alexanders-first-project-eadf69.webflow.io/

Hi @AlexanderBiglane,
Im having the same problem. Were you able to fix it?

Thanks,
Yon

To fix this, you’ll need to set initial state in the tradition to the default state (in this case - Opacity 0%)

1 Like

i was able to fix the grey background thanks to @Eli11

as he recommended, I needed to set an initial state for the grey background element to 0%.

2 Likes