Simple horizontal animations

Offset

ALA MA KOTA A KOT MA ALE

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

.pinned {
	overflow: hidden;
}

.box {
	position: relative;
}
.box h1 {
	font-size: 250px;
	width: max-content;
	white-space: nowrap;
}

.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>Simple horizontal animations</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div id="scroll-trigger-container">
			<div class="pinned">
				<div class="box"><h1>ALA MA KOTA A KOT MA ALE</h1></div>
				<div class="box"><h1>ALA MA KOTA A KOT MA ALE</h1></div>
				<div class="box"><h1>ALA MA KOTA A KOT MA ALE</h1></div>
				<div class="box"><h1>ALA MA KOTA A KOT MA ALE</h1></div>
			</div>
		</div>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
	gsap.registerPlugin(ScrollTrigger);
	const texts = document.querySelectorAll('.box');

	texts.forEach((domEl, i) => {
			const width = domEl.querySelector('h1').getBoundingClientRect().width;
			let animation = gsap.timeline().fromTo(domEl, { x: i % 2 == 0 ?  width : width * -1}, { x: i % 2 == 0 ? -width - window.innerWidth * -1: 0}) 
			const timeline = ScrollTrigger.create(
					{
							trigger: domEl,
							markers: true,
							scrub: 1,
							start: "top center", 
							end: "bottom center",
							animation,
							onRefresh: (self) => {
									animation.clear();
									animation.fromTo(domEl, { x: i % 2 == 0 ?  width : width * -1}, { x: i % 2 == 0 ? -width - window.innerWidth * -1: 0}) 
									animation.progress(self.progress);
								}
						});
		})
</script>