I’m very new to Webflow but come from a frontend development background. I was looking for some help on an interaction I’m trying to create.
Basically if you access the share link you will see a box in the center of the screen with two buttons at the bottom. Hovering over the left button will reveal a box in the background taking up half of the screen and moving the mouse away will hide it again.
For the next step I need to make it so that clicking the button will make the box grow bigger and reveal more information. That much I can figure out how to do easily enough but I also need to make it so that the bigger box stays visible when you move your mouse away from the button.
Is there any way of achieving this? I haven’t managed to find a way to only run the animation under certain circumstances so any help on this would be very much appreciated.
You can add multiple interactions to the same element. So at the moment, you’ve set up a hover on the button. Now you can go back in and add a click animation to the same button and style the larger box however you want.
If you’ve already created the animation for that, no need to re-do it. Just add a new Click animation the Job button, and select the animation you created.
Let me know if that helps, share your link if you need better instructions
I’m already aware of how to add multiple interactions to an element but the specific thing I’m trying to achieve is make it so the On Hover Out animation doesn’t run once the button has been clicked.
If you can help me to understand how I can do that it would be great.
It’s tricky, I couldn’t give an exact step by step, but the way I would try and attempt it…
Hover over button - red background appears
Hover out- red background disappears
While you’re over the button and the red background is displayed, if the user clicks the button, I would make a duplicate red background with a higher z index of the original background so that when the button is clicked, the new duplicate background stays there.
Meanwhile when you move the mouse away (hover out), the original red background secretly disappears as it normally would, but the illusion is that clicking the button, makes it stay.
