How to prioritize page load interaction to not show hidden element?

Hello and thank you in advance,

I am trying to create a banner interaction similar to the one shown in this tutorial: Animate a custom call-to-action banner — Webflow tutorial - YouTube

The only issues are:

  1. I would like for there to not be a space where the banner would be before it slides into view. In other words, there is a space above the nav now that exists before the interaction slides the banner into view and it looks ugly.
  2. When I copied this interaction and used a page load trigger it, the banner shows for a few miliseconds before hiding away and then sliding in.

I believe I found a solution for problem #1, as I just hide the banner-wrapper element and then show it when the rest of the interaction executes, but I can’t find a solution to problem #2. I did find this forum post (Prioritize "Page Load" interaction), but when I inserted the code referenced in the post into the “Inside tag” section in the page settings, it did nothing but add the text of the code.

I am sure both of these can be easily solved, but I have run out of ideas. Can anyone help please?

P.S. I had to remove the interaction in the meantime so it didn’t look janky.

Read-only link: Webflow -