SplitType

npm install split-type

main.js

import SplitType from "split-type";

const manifestoText = new SplitType(".manifesto-title p", {
  types: ["words", "chars"],
  tagName: "span",
  wordClass: "word",
  charClass: "char",
});

const style = document.createElement("style");
style.textContent = `
       .word {
         display: inline-block;
         margin-right: 0em;
       }
       .char {
         display: inline-block;
       }
     `;
document.head.appendChild(style);

gsap.set(manifestoText.chars, {
  opacity: 0.25,
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".manifesto",
    start: "top 35%",
    end: "bottom 75%",
    scrub: true,
    markers: false,
  },
});

manifestoText.chars.forEach((char, index) => {
  tl.to(
    char,
    {
      opacity: 1,
      duration: 0.1,
      ease: "none",
    },
    index * 0.1
  );
});