Today is Friday and my brain is already in the weekend and I'm stuck right now.
What I expect
When I click on a button, I want the entire window to close in a circle from the outside to the inside, just like in an old movie. As soon as the animation is finished, I want another function to be called. For simplicity here is a simple alert().
Thanks in advance!
Here is my current status of code:
const button = document.querySelector('button');
button.addEventListener('click', (e) => {
const closer = document.querySelector('#closer');
const body = document.querySelector('body');
body.classList.add('bg-dark')
closer.classList.toggle('box-hover');
alert();
});* {
margin: 0;
padding: 0;
}
.bg-dark {
background: black;
}
body {
xalign-items: center;
height: 100vh;
xjustify-content: center;
background: white;
}
.container {
width: 50%;
margin: 0px auto;
background: #ccc;
padding: 10px;
}
.box {
background: white;
clip-path: circle(75%);
height: 100%;
transition: clip-path 2s;
width: 100%;
}
.box-hover {
clip-path: circle(0%);
}
button {
padding: 10px;
z-index: 9999;
}<body>
<div id="closer" class="box">
<div class="container">
<h1>hello world</h1>
<button>shrink</button>
</div>
</div>
</body>