<!-- Orig: https://codepen.io/thebabydino/pen/MWPeLmp/3b4f19bc4ae33e062d66b7d5122e6315 -->
<!-- --n = h1.textContent.length -->
<h1 style="--n: 114"><span>There are so many more effects than the ones I have shown here that you can achieve with <strong>Scroll-Driven Animations</strong>.</span></h1>

html {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 100%;
	
	/* background & scrollbar prettifying stuff */
	background: 
		linear-gradient(-45deg, white, gainsboro) fixed;
	scrollbar-color: crimson silver;
	
	&::-webkit-scrollbar { width: .75em }
	&::-webkit-scrollbar-track { background: silver }
	&::-webkit-scrollbar-thumb { background: crimson }
}

body { height: 200% }

h1 {
	/* ensure it doesn't move with scroll */
	position: fixed;
	/* and that it's in the middle */
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	/* and doesn't exceed a certain width */
	width: min(90%, 23em);
	/* and font scales with viewport, but within limits */
	font: clamp(.625em, 5vw, 4em) fira code, monospace
}

span {
	background: 
		/* highlight text */
		linear-gradient(90deg, crimson 0 0) 
			0/ calc(var(--n)*1ch) no-repeat 
		/* faded text */
		pink;
	-webkit-background-clip: text;
	color: transparent;
	animation: text .1s steps(var(--n, 100)) forwards;
	animation-timeline: scroll(root);
}

@keyframes text { 0% { background-size: 0 } }

strong { text-transform: capitalize }