In the Preload-time I want a Logo to do some animation in the center of the viewport on black background.
My idea was to have the sticky header onload with a width 100% & height 100vh, and then shrink it to a normal height to the top. The header should normally have a height of min-content (depending on the Logo size)
The header shrinking works but not to min-content.
I've read that animating height is a no-go because of all the reflow & repainting, but i have no idea how i'm supposed to animate a logo from center viewport to center header.
header {
position: fixed;
z-index: 4;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
overflow: hidden;
box-shadow: var(--shadow);
animation: header-minimize-after-preload 2.5s ease 5s forwards;
}
@keyframes header-minimize-after-preload {
0% {
height: 100%;
}
100% {
height: 10%;
/* when using min-content, the header jumps into size instead of animating*/
}
}
<body>
<header>
<nav>
</nav>
<h1 class="logo-wrapper">
<img src="//picsum.photos/100/50" />
</h1>
</header>
</body>Thanks in advance!!
i did some changes to your code and i hope achieved what you wanted i wrapped the navigation inside another div and its overflowing the header and header is going from 100% to 0 and you will only end up with the navigation wrapper
header {
position: fixed;
z-index: 4;
top: 0;
background-color:red;
height: 100vh;
width: 100%;
box-shadow: var(--shadow);
animation: header-minimize-after-preload 2.5s ease 5s forwards;
display:grid;
}
.navigation-container{
width:100%;
height:fit-content;
display:flex;
justify-content:center;
align-items:center;
margin: auto;
background-color:blue;
}
@keyframes header-minimize-after-preload {
0% {
height: 100%;
}
100% {
height: 0%;
/* when using min-content, the header jumps into size instead of animating*/
}
}<body>
<header>
<div class="navigation-container">
<nav>
</nav>
<h1 class="logo-wrapper">
<img src="//picsum.photos/100/50" />
</h1>
</div>
</header>
</body>