JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />


<section class="h-scroll">
  <div class="stick">
    <h2>Keep scrolling...</h2>
    <div class="wrap"><img src="https://images.unsplash.com/photo-1488326682254-514166637787?w=800"/><img src="https://images.unsplash.com/photo-1495746269687-d1ca02626ee8?w=800"/><img src="https://images.unsplash.com/photo-1525470310764-cf1ef9e728dc?w=800"/><img src="https://images.unsplash.com/photo-1493662404096-9ecc84ebba6b?w=800"/><img src="https://images.unsplash.com/photo-1508138119323-5452bd81d53d?w=800"/><img src="https://images.unsplash.com/photo-1481876453656-5f9968fda498?w=800"/><img src="https://images.unsplash.com/photo-1540968221243-29f5d70540bf?w=800"/><img src="https://images.unsplash.com/photo-1523947204020-b03d6498b702?w=800"/></div>
  </div>
</section>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

CSS

@property --k {
	syntax: '<number>';
	initial-value: 0;
	inherits: true;
}


html {
	overflow-x: hidden;
}

body { margin: 0 }


section {
	height: 500vh;
	background: #212121;
	
	@supports (animation-timeline: view()) {
		background: 
			linear-gradient(90deg, 
					rgba(gold, calc(1 - round(down, var(--k)))) calc(var(--k)*100%), 
					#0000 0) 
				0 0/ 100% .5rem no-repeat fixed #212121;
		animation: k 1s both;
		animation-timeline: view();
		animation-range: contain
	}
}

@keyframes k { to { --k: 1 } }


.stick {
	box-sizing: border-box;
	display: grid;
	align-content: center;
	position: sticky;
	top: 0;
	padding: 2em;
	height: 100vh
}

.wrap {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 2em;
	translate: calc(var(--k)*(50vw - 100%))
}