Free smooth scrolling like experience

Offset

Currently showing: 0

Article 1

Article 2

Article 3

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

.section-indicator {
  position: relative;
  width: 50%;
}

.sections {
  width: 50%;
}

.pinned {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.box {
  position: relative;
  height: 100vh;
  width: 100%;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}
    </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="section-indicator" id="no-smooth">
	<div class="pinned">
	  <h1>Currently showing: <span>0</span></h1>
	</div>
      </div>
      <div class="sections" id="smooth">
	<div class="box yellow"><h1>Article 1</h1></div>
	<div class="box red"><h1>Article 2</h1></div>
	<div class="box yellow"><h1>Article 3</h1></div>
      </div>
    </div>
    <article class="container"><h1>Offset</h1></article>
  </body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const sections = document.querySelectorAll('.sections > .box');
  const spanUpdater = document.querySelector('.section-indicator span');

  const sectionsTriggers = [];
  sections.forEach((domElement, i) =>
      sectionsTriggers.push(
	  ScrollTrigger.create({
	      trigger: domElement,
	      start: 'top center',
	      end: 'bottom center',
	      markers: true,
	      onEnter: () => {
		  spanUpdater.innerText = i;
		},
	      onEnterBack: () => {
		  spanUpdater.innerText = i;
		}
	    })
	)
    );
</script>