Stacking animations to create a popup modal

Hi all,

I’m releasing an ebook soon and want to put a “preorder now”-type popup on my website’s homepage. I built the modal, but I don’t know how to combine the animations so that it:

  • Appears when someone begins to scroll
  • Closes when they click the X image in the upper right corner

I played with both animations. The closing one works, but the scrolling one doesn’t seem to. When I try to put both of them together, the page scroll appears as the page trigger under the “X” image, and I’m rather confused by the whole thing. I’m not a developer, so I’m having to learn as I go.

I also haven’t a clue how to make sure this only shows up once for people. I used to use ConvertPlus when I was on Wordpress, and that took care of everything.

Public link is below. Insights appreciated! Thanks.

Here is my public share link: https://preview.webflow.com/preview/mhndev?utm_medium=preview_link&utm_source=designer&utm_content=mhndev&preview=567b1f9967a621d2b2c86dd0c9f387ca&workflow=preview