Can't get divs to hide on load - they flash flash briefly on-screen. PLEASE HELP!

Hi all,

I thought this would be an easy fix but I’m absolutely getting nowhere with it. Okay, so it’s a fairly minor issue but basically the dropdown menus that I’ve created are flashing briefly on screen as the page loads. I know it’s not a big deal but I don’t feel it gives a good impression.

I’ve tried the following:

  • Setting the initial state on the interaction trigger to “hide” for those divs. This breaks the interaction for some unknown reason. AKA the divs refuse to show again when I specify “Show” in the Timed Animation.

  • Setting the initial state on the interaction trigger to make the size “0” for those divs. Same deal as above.

  • Same as the above two but instead changing the properties normally (instead of in the trigger) and having the trigger show/hide or size/auto.

  • And finally hiding the entire navigation with a page trigger and then showing it after the page loaded. Still flashes.

What the heck am I doing wrong here? It seems like something so simple but I’m absolutely not getting it. I feel like I’m missing something absolutely fundamental but am just fully unaware of what that would be.

https://cinaesthesia2019.webflow.io/


Here is my public share link: LINK