Animation triggering example

Offset

Text to reveal

Offset

        
<html>
	<head>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
		<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
		<style>
body {
	margin: 0;
	padding: 0;
}

#scroll-trigger-container {
	position: relative;
	height: 200vh;
}

.pinned {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
}

.box {
	position: absolute;
	top: 0;
	left: 0;
}

.red {
	background-color: red;
	height: 100vh;
}

.yellow {
	background-color: yellow;
	width: 100%;
}
.pinned-article {
	height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
		<article class="container"><h1>Animation triggering example</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div id="scroll-trigger-container">
			<div class="pinned">
				<article class="pinned-article"><h1>Text to reveal</h1></article>
				<div class="box yellow"></div>
				<div class="box red"></div>
			</div>
		</div>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
	gsap.registerPlugin(ScrollTrigger);
	const progressRef = document.querySelector('progress');

	const timeline = gsap.timeline({
			scrollTrigger: {
					trigger: "#scroll-trigger-container",
					markers: true,
					scrub: true,
					start: "top top", 
					end: "bottom bottom", 
				}});

	timeline.addLabel('remove-red')
		.fromTo('.red', { width: '100%' }, {width: 0}) 
		.addLabel('remove-yellow')
		.fromTo('.yellow', { height: '100vh' }, {height: 0}) 
		.to('.pinned-article', {opacity: 1, delay: -0.33}) 
</script>