Growing header

The steps

1. Create the animation
   1. Create the CSS animation
   2. Add the animation to the element
2. Attach the animation to the scroll-timeline
   1. Create a scroll timeline
   2. Add the animation-timeline to the element
   3. Set the animation range (when should it start and when should it end)

The code

First of all, the HTML

<div class="container">
		<h2>
			This title will become HUGE when you're scrolling down!
			</h2>
			... more content here.
			</div>

1. Create the CSS animation

@keyframes grow-on-scroll {
				from {
					transform: scale(1);
				}
				to {
					transform: scale(12);
				}
			}
			
			.animated-title {
				animation: grow-on-scroll linear forwards;
			}

2.1 Create a scroll timeline

.container {
				view-timeline-name: --growing-header;
			}

2.2 Create a scroll timeline

.animated-title {
				animation-timeline: --growing-header;
			}

2.3 Set the animation range

.animated-title {
				animation-range: 50vh 80vh;
			}

The total CSS

@keyframes grow-on-scroll {
				from {
					transform: scale(1);
				}
				to {
					transform: scale(12);
				}
			}
			
			.container {
				view-timeline-name: --growing-header;
			}
			
			.animated-title {
				animation: grow-on-scroll linear forwards;
				animation-timeline: --growing-header;
				animation-range: 50vh 80vh;
			}