I'm trying to create an animation where upon a click event:
1. LayerOne (a 30% black layer) and
2. LayerTwo (a Modal on top) are visible for either
a) 5 seconds or b) until user clicks outside of modal area
It's a common web UX, where a modal appears and the screen behind is darkened so you notice the modal, and it's either timed or you can click on the darkened screen behind it to exit early.
I'm thinking it would be accomplished by writing two functions, one to toggle the dark layer/modal and another to decide if the dark layer/modal are visible, but having a hard time accomplishing this.
I think this could also be done by just adding the dark layer/modal as state changes upon the click event, and adding an if statement like, if LayerOne is in state B (opacity: 100), and user clicks on it, switch LayerOne and LayerTwo to state A (opacity: 0), else if time = 5 seconds, switch LayerOne and LayerTwo to state A (opacity: 0). Would appreciate any tips!