Start | End example

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;
}

progress {
	position: sticky;
	top: 0;
}


		</style>
	</head>
	<body>
		<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
		<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>Start | End example</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div id="scroll-trigger-container">
			<progress value="25" max="100"></progress>
		</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,
					start: "top top", 
					end: "bottom bottom", 
					onUpdate: e => {
							console.log(e, progressRef.value);
							progressRef.value = 100 * e.progress;
						}
				}});

</script>