Stagger opacity of letters

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

.to-reveal-simple__letter-wrapper {
  display: inline-block;
  overflow: hidden;
}
.to-reveal-simple__word-wrapper {
  opacity: 0.3;
}

.to-reveal-simple__letter--space {
	/* set width for empty space */
	width: 0.3em;
}

.to-reveal-multiline-width {
  width: 100px;
}

.main-container {
  min-height: 300vh;
}

.pinned-container {
  position: sticky;
  padding: 20%;
  top: 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>Stagger opacity of letters</h1></article>

		<article class="container main-container">
                  <div class="pinned-container">
			<h1 class="to-reveal-stagger">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
                  </div>
		</article>

	</body>
</html>

<script>
  const addRevealFuncionality = (containerSelector) => {
      const textsToRevealEl = document.querySelector(containerSelector);

      const texts = textsToRevealEl.innerText;
      textsToRevealEl.innerText = '';

      let wordWrap = document.createElement('span');

      texts.split('').forEach((letter) => {
          console.log(letter);
          const spanEl = document.createElement('span');
          const divEl = document.createElement('div');

          spanEl.appendChild(divEl);
          divEl.innerText = letter;
          divEl.classList.add('to-reveal-simple__letter');
          spanEl.classList.add('to-reveal-simple__letter-wrapper');

          wordWrap.appendChild(spanEl);

          if (letter === ' ') {
              divEl.classList.add('to-reveal-simple__letter--space');
              wordWrap.classList.add('to-reveal-simple__word-wrapper');
              textsToRevealEl.appendChild(wordWrap);
              wordWrap = document.createElement('span');
          }
          console.log(textsToRevealEl);
        });

        textsToRevealEl.appendChild(wordWrap);
        wordWrap.classList.add('to-reveal-simple__word-wrapper');
    }

  addRevealFuncionality('.to-reveal-stagger');
  gsap.registerPlugin(ScrollTrigger);
  const timeline = gsap.timeline({
      scrollTrigger: {
          trigger: ".main-container",
          markers: true,
          scrub: 1,
          start: "top top", 
          end: "bottom bottom", 
        }});
  timeline.add('show');
  timeline.to('.to-reveal-stagger .to-reveal-simple__word-wrapper', { opacity: 1, stagger: 0.1}, 'show');

</script>