Here is my Nerway storytelling example

Here description 1

Here description 2

Here description 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>

#scroll-trigger-container {
  height: 1000vh;
  position: relative;
}
.pinned-container {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.image {
  scale: 2;
}

.description {
  padding: 2%;
  background-color: white;
  position: absolute;
  opacity: 0;
}

.description-1 {
  top: 70%;
  left: 10%;
}

.description-2 {
  top: 15%;
  right: 40%;
}

.description-3 {
  bottom: 10%;
  left: 20%;
}
    </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>Here is my Nerway storytelling example</h1></article>
    <div id="scroll-trigger-container">
      <div class="pinned-container">
        <img class="image" src="/photos.jpeg" />
        <h4 class="description description-1">Here description 1</h4>
        <h4 class="description description-2">Here description 2</h4>
        <h4 class="description description-3">Here description 3</h4>
      </div>
    </div>
    <article class="container"><h1>Offset</h1></article>
  </body>
</html>

<script>
  gsap.registerPlugin(ScrollTrigger);

  const timeline = gsap.timeline({
      scrollTrigger: {
          trigger: "#scroll-trigger-container",
          markers: true,
          start: "top top", 
          scrub: true,
          end: `bottom bottom`, 
        }});
  timeline.add('1');
  timeline.to('.image', { x: '10%', y: '-10%'}, '1');
  timeline.to('.description-1', { opacity: 1 }, '1');
  timeline.add('2');
  timeline.to('.image', { x: '-24%', y: '-2%'}, '2');
  timeline.to('.description-1', { opacity: 0 }, '2-=0.2');
  timeline.to('.description-2', { opacity: 1 }, '2');
  timeline.add('3');
  timeline.to('.image', { x: '24%', y: '-50%'}, '3');
  timeline.to('.description-2', { opacity: 0 }, '3-=0.2');
  timeline.to('.description-3', { opacity: 1 }, '3');

</script>