I’m really new to WebFlow and I’m trying to get my head wrapped around interactions. I’ve started building a pop-up modal where I click on a button and then a menu opens in a lightbox fashion. I’ve been successful building the pop-up modal, but now I’m experiencing problems getting the opacity fade-in animation to work correctly. Here’s a link to the test page I’m working on…
So here’s what I’m running into… If you click on the blue “Click Here” button in the upper left corner you will see the pop-up modal fade in nicely, and if you click outside of the menu in the blue area it fades away nicely. The problem occurs when you try to click the “Click Here” button for the second time and there is no longer the subtle fade that happened the first time. Does anyone have a clue why it would work perfectly the first time but not the second time?
It looks like you’ve been making some changes…or maybe half way through figuring it out…let me know…
My guess is that the close animation - clicking on the blue, was missing something - so you are using a hide/show and an opacity interaction on it - but it may have been missing something to reset the wrapper ready for the button to trigger it again.
So hypothetically:
Button click ‘shows’ and ‘opacity’ fades in to 100% over 0.5s
Blue area click ‘hides’ but doesn’t reset the opacity back to 0%
When the Button is clicked again opacity is already 100% so it’s just abruptly ‘showing’ the menu again without any 0.5s fade delay on opacity
Here are a couple of examples of modals you can take a look at if it helps:
Yes, thank you for responding. Also I’m sorry I didn’t reply and let you know sooner, but I’ve been trying to figure it out over the weekend, and I think I made some good progress. The fade animation seems to be working now, although I’m not entirely sure what I did to fix it. If you think it might help others on the forum I could post a couple of screen shots of my Show and Hide settings but essentially the only difference was how I set up the Hide animation. In my first attempt I had the opacity action set as “with previous action” with the Hide/Show action. That might be why I was experiencing the issues I was having but I’m not entirely sure. Anyway, I’ve tried it several more times and I have had good luck. The only thing I can’t seem to make work now is a scale effect I want to add when the fade in is happening so I’m still trying to figure that part out.
Scaling should be fairly simple to set up, and as you know you can have a number of different effects happening in one animation - hide/show/fade and also scale.
