This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Dani Bedar
Posted Feb 02 - Read on Facebook

Hello!

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!

3 Comments

Aalok Trivedi

is something like this what you're looking for? Probably not the cleanest code but it works http://share.framerjs.com/xc4binqdo69u/

Tom Reuveni

try setting up a flow component

Dani Bedar

Thanks for the suggestion! This is for desktop web, so I don't want that flow animation that Native apps would use, but I started playing with flow and it's a great tool!

Read the entire post on Facebook