Show div popup after 5 sec

Hi,

I want to have a div element where a popup pops up in the top screen after 3 seconds. I haven’t really seen an option in the animation settings.

Anybody knows how to do this?

a bit like this:

Thank you!

https://preview.webflow.com/preview/stan-a9dd55?utm_medium=preview_link&utm_source=designer&utm_content=stan-a9dd55&preview=2992ed5767a30c12622413b679374a25&workflow=preview

Hi @Mourik this should be simple. To create a pop up that will apper in middle of the screen, you’ll need a little set up.

Create div and give it a class (example. pop-up-wrapper), set position: fixed 0% for all sides, display:Flex align it middle, add in the content you want to see.

Now we create the animation, in the navigator clock on the body, go to interaction (press H on keyboard) add a page trigger animation select page load.


clock the dropdown under when page finishes loading, select start an animation.
image
click the plus to create new animation.
Now in the navigator select the pop-up-wrapper and click plus again
Select Hide/show

check the initial state and set it to hidden

again click plus set display to flex and also set delay to 3seconds.
Now the popup will show when the page finishes loading, youll probably want to add some kind of button that will close it right. Just create a button put interaction that will set display of the pop-up-wrapper to display none. You make the animations prettier by adding an interaction that affects opacity too, but thats up to you. T