Help with a button overlay not triggering on repeat press

Design help Animations & Interactions
1

Hello,

I’m currently building an interaction into a site so that when a user clicks on a button a fullscreen overlay appears showing a selection of projects.

I have it working pretty much how I want. However, at the moment if a user opens the overlay (by clicking the ‘view projects’ button in the top left corner) and then closes it using the ‘X’ button that appears, if they then went to click the ‘view projects’ button again on that page the overlay doesn’t appear. The page acts as if the overlay is open (the mouse can still click elements from within the overlay for example) but it doesn’t appear visually.

I suspect some interaction command is causing the issue but I don’t know how to solve it. At the moment when the ‘view projects’ button is clicked the overlay div is set to display as flex and then its size becomes 100 vw/vh. When the ‘X’ button is pressed the div is set to size down to 0 vw/vh and then display as none.

Any help much appreciated!

Here is a link to one of the pages it appears on:

https://rawlingsonlane-test.webflow.io/projects/product-brochure-design

And a read only link to the site:

https://preview.webflow.com/preview/rawlingsonlane-test?utm_source=rawlingsonlane-test&preview=0f8a03da388c2d414a15a0de090ef7dc&mode=preview

2

Update:

I’ve managed to solve the behaviour causing the elements within the overlay to still be clickable (I had forgotten to set interactions for their display to revert to none on the ‘X’ button click).

However the ‘view projects’ button is still completely dead on a second click after closing the overlay.

3

Update 2:

Solved it! For anyone who stumbles onto this with the same issue; despite the animation being different on the ‘X’ hide animation vs. the ‘view projects’ appear animation, I had to put in interactions that reset the selected elements to the parameters outlined in the appear animation.