Typography

SplitType

Splits text into chars / words / lines for animation.

Live demosplit-type

Every character animates on its own.

SplitType breaks a string into per-character / per-word / per-line wrappers so you can animate each piece. Pair with GSAP or Framer Motion for any fancy hero text you've ever seen.

Install

npm i split-type

Snippet

import SplitType from "split-type";
import gsap from "gsap";

const split = new SplitType(ref.current!, { types: "chars,words" });
gsap.from(split.chars, {
  y: 80,
  opacity: 0,
  stagger: 0.02,
  duration: 0.6,
  ease: "power3.out",
});