Text reveal example

T
e
x
t
t
o
r
e
v
e
a
l

T
e
x
t
t
o
r
e
v
e
a
l
2

T
e
x
t
t
o
r
e
v
e
a
l
3

        <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__letter--space {
	width: 0.3em;
}

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

.main-container {
  height: 300vh;
}

.pinned-container {
  height: 100vh;
  position: sticky;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  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>Text reveal example</h1></article>

		<article class="container main-container">
                    <div class="pinned-container">
			<h1 class="to-reveal-simple-1">Text to reveal</h1>
			<h1 class="to-reveal-simple-2">Text to reveal 2</h1>
			<h1 class="to-reveal-simple-3">Text to reveal 3</h1>
                    </div>
		</article>

	</body>
</html>

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

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


      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');
          if (letter === ' ') {
              divEl.classList.add('to-reveal-simple__letter--space');
            }
          console.log(textsToRevealEl);
          textsToRevealEl.appendChild(spanEl);
        });

    }
  const timeline = gsap.timeline({
      scrollTrigger: {
          trigger: ".main-container",
          scrub: 1,
          start: "top top", 
          end: "bottom bottom", 
        }});

  addRevealFuncionality('.to-reveal-simple-1');
  addRevealFuncionality('.to-reveal-simple-2');
  addRevealFuncionality('.to-reveal-simple-3');
  timeline.fromTo('.to-reveal-simple-1 .to-reveal-simple__letter', { y: '100%'}, {y: 0, stagger: 0.5 });
  timeline.fromTo('.to-reveal-simple-2 .to-reveal-simple__letter', { y: '100%'}, {y: 0 });
  timeline.fromTo('.to-reveal-simple-3 .to-reveal-simple__letter', { y: '100%'}, {y: 0, reversed: true, stagger: 0.5 });
</script>