About this demo

This demo features a header bar that shrinks as you scroll down. Simultaneously, the contents of the header bar also shrink and adjust position. Furthermore, a shadow is also added to the header as it is shrinking.

The Code + Explanation

Each element that needs to be animated – the title, the header itself, the background image, etc. – has its own animation attached.

@keyframes adjust-info {
	to {
		grid-template-columns: 4em 1fr;
		gap: 1rem;
		height: 4.75rem;
	}
}
@keyframes shrink-name {
	to { font-size: 1.5rem; }
}
@keyframes add-shadow {
	to { box-shadow: 0 5px 5px -3px rgba(0,0,0,.26); }
}
@keyframes move-button {
	to { translate: 0% 40%; }
}
@keyframes move-and-fade-background {
	to {
		translate: 0% -5%;
		scale: 0.96;
		opacity: 0.3;
	}
}

.info {
	animation: adjust-info linear both;
}
.info h2 {
	animation: shrink-name linear both;
}
header {
	animation: add-shadow linear both;
}
#button-edit  {
	animation: move-button linear both;
}
.bg  {
	animation: move-and-fade-background linear both;
}

All of these animations are hooked onto a Scroll Timeline.

.info, h2, header, #button-edit, .bg {
	animation-timeline: scroll();
	animation-range: 0 150px;
}

By using scroll() without any arguments, the Scroll Timeline will follow the nearest scroller, which is the document’s scroller. It will track it in the block direction.

By setting the animation-range to 0 150px, these animations run from start to finish as you scroll 150px down the page.