Preview:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiple Split Text Animations</title>
  <style>
    .ys-cool-split {
      width: 85%;
      font-size: 2rem;
      color: rgba(255, 255, 255, 0.125);
      transition: color 0.3s;
      margin: 50vh 0; /* Added margin to simulate scrolling */
    }
    body {
      margin: 0;
      background-color: #111;
    }
  </style>
</head>
<body>

  <h2 class="ys-cool-split">First Split Text Animation</h2>
  <h2 class="ys-cool-split">Second Split Text Animation</h2>
  <h2 class="ys-cool-split">Third Split Text Animation</h2>

  <!-- Place your JS scripts here, at the end of the body -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>

  <script>
    gsap.registerPlugin(ScrollTrigger);

    document.querySelectorAll('.ys-cool-split').forEach(element => {
      const split = new SplitType(element, { types: 'words, chars' });

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: element,
          start: 'top 85%',
          end: 'top 15%',
          scrub: 0.5,
        },
      });

      tl.set(split.chars, {
        duration: 0.3,
        color: 'white',
        stagger: 0.1,
      }, 0.1);
    });
  </script>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter