<nav id="nav">
  <button id="chars">chars</button>
  <button id="words">words</button>
  <button id="lines">lines</button>
  <button id="charsWordsLines">chars words and lines</button>
  <button id="revert">revert</button>
</nav>  
  
<div id="demo">
  <div id="quote">SplitText supports <strong>nested tags</strong> like  <span class="code">&lt;span&gt;</span>, <span class="code">&lt;strong&gt;</span>, and <span class="code">&lt;em&gt;</span>. Want to preserve a link? <a href="https://www.greensock.com" target="_blank">No problem</a>. You can even <em>GO NUTS with EMOJI</em> 🟣 🔶 🩵</div>
  </div>
</div>
  

* {
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}

strong {
  color: var(--color-orangey);
}

.highlight {
  color: red;
  font-family: serif;
}

.code {
  font-family: Courier;
  color: var(--color-surface-white);
}

#demo {
  position: relative;
}
#quote {
  font-size: clamp(2rem, 6rem, 4.5vw);
  line-height: 1.2;
  color: #dfdcff;
  text-align: center;
}

button {
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

#nav {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

a:visited,
a:link,
a:active {
  color: var(--color-orangey);
  text-decoration: none;
  display: inline-block;
}

a:hover {
  background-color: var(--color-orangey);
  color: var(--color-surface-white);
}

span {
  display: inline-block;
}

console.clear();

gsap.registerPlugin(SplitText);

document.fonts.ready.then(() => {
  // Elements
  const quote = document.querySelector("#quote");
  const buttons = {
    chars: document.querySelector("#chars"),
    words: document.querySelector("#words"),
    lines: document.querySelector("#lines"),
    combo: document.querySelector("#charsWordsLines"),
    revert: document.querySelector("#revert")
  };

  // Setup
  let splitText = SplitText.create(quote, {
    type: "words"
  });
  const tl = gsap.timeline();

  gsap.set(quote, { perspective: 400 });

  // Kill animations and revert text
  function kill() {
    tl.clear().time(0);
    splitText.revert();
  }

  // Split by characters
  buttons.chars.addEventListener("click", () => {
    kill();
    splitText.split({ type: "chars,words" });

    tl.from(splitText.chars, {
      duration: 1,
      scale: 4,
      autoAlpha: 0,
      rotationX: -180,
      transformOrigin: "100% 50%",
      ease: "back",
      stagger: 0.02
    });
  });

  // Split by words
  buttons.words.addEventListener("click", () => {
    kill();
    splitText.split({ type: "words" });

    splitText.words.forEach((el, i) => {
      tl.from(el, { duration: 1, opacity: 0, force3D: true }, i * 0.01);
      tl.from(el, { duration: 1, scale: i % 2 === 0 ? 0 : 2 }, i * 0.01);
    });
  });

  // Split by lines
  buttons.lines.addEventListener("click", () => {
    kill();
    splitText.split({
      type: "lines",
      autoSplit: true,
      onSplit: (self) => {
        return gsap.from(splitText.lines, {
          duration: 2,
          opacity: 0,
          x: -100,
          stagger: 0.1,
          ease: "expo.out"
        });
      }
    });
  });

  // Split by chars, words, and lines
  buttons.combo.addEventListener("click", () => {
    kill();
    splitText.split({ type: "chars,words,lines" });

    tl.from(
      splitText.chars,
      {
        duration: 0.6,
        autoAlpha: 0,
        scale: 3,
        force3D: true,
        stagger: 0.02
      },
      0.5
    )
      .to(
        splitText.words,
        {
          duration: 0.2,
          color: "#ff8709",
          scale: 0.9,
          stagger: 0.1
        },
        "words"
      )
      .to(
        splitText.words,
        {
          duration: 0.4,
          color: "white",
          scale: 1,
          stagger: 0.1
        },
        "words+=0.1"
      )
      .to(splitText.lines, {
        duration: 0.5,
        x: 100,
        autoAlpha: 0,
        stagger: 0.2
      });
  });

  // Revert
  buttons.revert.addEventListener("click", () => {
    splitText.revert();
  });
});