I’m trying to make a landing page that opens different forms in different modals depending on which button you click.
The first bug or issue that I ran into is that “duplicating” a modal div would not let me attach different interactions to the duplicated div. The new div got whatever interactions the one I copied it from had. It would also update the original div if I changed or tried to set the interactions on the duplicated one. Not great, but ok just a minor bug.
Next I tried to use a combination of click and page load interactions to achieve the following behavior… “hide on page load”, “showModal1” when “button1” clicked, “showModal2” when “button2” clicked, “closeModals” when any of the close buttons are clicked.
I was hoping to reuse the same “closeModals” animation on all of the X-to-close buttons, but somehow I’ve broken all interactions.
It would not let me target different classes with the same animation so I ended up creating a bunch of extra animations like “hideModal1onload”, “hideModal2onload”, “closeModal1”, “closeModal2”, etc.
But at some point, interactions just completely broke and now, I can preview them in the Interactions/Animations side panel, but nothing works when I publish or preview in webflow anymore.
The final straw is that since the button animations seemed completely broken I replaced the MouseClick on one of the buttons to something simple like “spin”, previewed it in the side panel, and saw it spin but when I hit preview the Buttons opacity was set to 0% instead.
At this point I’ve sunk 2 months into this project and 2 days just trying to make the buttons work, and I don’t know what to do if I can’t get it working on Webflow.
Here is my public share link: LINK
(how to access public share link)