There are 19 Modals that need to be hidden on load. They are all blinking at load then disappearing. Considering that the issue is with the “load” interaction, I have tried to have it start as “hidden” in its initial state… but its still blinking.
I assume the modals are visible and set to be hidden as defined by an “initial state” right?
This issue exists for a long time, and had pushed me to solve it by styling the initial state normally (hidden in the Style panel) instead of relying on the “initial state” of IXx panels. When set like this, there is absolutely no issue.
And yes, it makes them a bit harder to handle because they’re hidden in the designer and anytime you need to edit them, you have to pass them visible again.
But to address this I have a general strategy. It’s a strategy that I apply to anything that’s difficult to select or to access, because it’s either buried down in the z hierarchy, or hidden, or invisible.
For example with your modals, I’d do this:
each modal is a symbol (even if it never repeats)
each modal symbol is nested inside of a div
the interaction, and “manual initial styling” is made on the div containing the symbol
all the symbols are gathered in a page called “Dashboard”, that is either not linked, could be password protected, but I generally don’t care, unlinked is fine with me.
So you get the idea, I gather on one page all the items that are either difficult to access, or that I need to update often. For example I have this clients who has metrics data all over his site that needs to be changed each month. I made him a dashboard page and he can change everything from on single page. As everything is a symbol, the changes spread on all the site.
You could also try to solve your issue by changing nothing but by applying a very tiny temporization on your header section, going from opacity zero to 100% at load, in the span of 200ms. Enough for the flashing to go unnoticed. It’s a kind of loading. I do this fake loading on dates that I translate with Javascript, to avoid the text flashing from a language to another. In the end, it’s kind of elegant if you have a nice color below, or if you “style the blank state”, like facebook does when you load it, showing blocks before real content.
Unfortunately, after a couple of hours I still cannot prevent the blinking. It seems to override everything.
Perhaps you can explain this in more detail.
“styling the initial state normally (hidden in the Style panel) instead of relying on the “initial state” of IXx panels.”
I have used Webflow for a few years, so I believe I understand your suggestion, but maybe I am misunderstanding. It appears to me your are suggesting to use the “state” in the style panel as “none” which does prevent the modals from “blinking” on the load… but it also means that they are not visible when clicking on the buttons designed to display them. Did I get that wrong?
Thank you for such a great answer and the insight on your strategy on how to handle these ongoingly.