Free smooth scrolling like experience

Offset

No smooth

Smooth scrolling kind off

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

.split {
	display: flex;
}

.container-for-pin {
	position: relative;
	width: 50%;
	height: 300vh;
}

.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>Free smooth scrolling like experience</h1></article>
		<article class="container"><h1>Offset</h1></article>
		<div class="split">
			<div class="container-for-pin" id="no-smooth">
				<div class="pinned">
					<h1 class="pinned-article">No smooth</h1>
					<div class="box yellow"></div>
					<div class="box red"></div>
				</div>
			</div>
			<div class="container-for-pin" id="smooth">
				<div class="pinned">
					<h1 class="pinned-article">Smooth scrolling kind off</h1>
					<div class="box yellow"></div>
					<div class="box red"></div>
				</div>
			</div>
		</div>
		<article class="container"><h1>Offset</h1></article>
	</body>
</html>

<script>
	gsap.registerPlugin(ScrollTrigger);

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

	noSmoothTimeline.addLabel('remove-red')
		.fromTo('#no-smooth .red', { width: '100%' }, {width: 0}) 
		.addLabel('remove-yellow')
		.fromTo('#no-smooth .yellow', { height: '100vh' }, {height: 0}) 
		.to('#no-smooth .pinned-article', {opacity: 1, delay: -0.33}) 


	const smoothTimeline = gsap.timeline({
			scrollTrigger: {
					trigger: "#smooth",
					markers: true,
					scrub: 1,
					start: "top top", 
					end: "bottom bottom", 
				}});

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