Set initial value - Bug?

Hello,

I have the following issue: I have a section which I only want to show, when a certain button is clicked (on page load it should be hidden). So I have set an animation for this button and as a first step I set display to “none” as my initial state (see picture) and in the second step I set display to “flex”.
It works fine when the page size stays the same. The section is not showing at page load and when I click the button the section appears. However the issue I have is when the section is visible and I resize my window and reach the next breakpoint. The section disappears again.
It must have something to do with the first animation step and the intitial value, because when I remove this step and handle the visibility of the element at page load with Custom Code the issue does not happen.

when you resize the page and hit a breakpoint the Webflow IX2 reloads the animation thus hiding the section. Workaound would be to use JavaScript to display the element (hidden with CSS) on a trigger.

Hi Jeff;
thank you for the quick answer.
Could you please explain your workaround a bit, regarding hiding the element on page load?

Simple toggle visibility of element with button - Vanilla (codepen.io)