Split-type
~4kb gzippedSplit text into characters, words, or lines -- then animate them.
See It in Action
Each demo pairs Split-type with GSAP. Split-type builds the DOM (chars / words / lines), GSAP animates them. Scroll or click to trigger.
Split a headline into individual characters and fade each one up with GSAP stagger. The canonical Split-type + GSAP combo.
What is Split-type?
Split-type is a small utility that splits text into characters, words, or lines -- wrapping each in its own <div> or <span> so you can target them with CSS or animate them with a library like GSAP or Anime.js.
It is the TypeScript-rewritten successor to Splitting.js, with ~5x the weekly npm downloads and more reliable line-detection. Split-type does nothing on its own -- it prepares the DOM, and a partner animation library does the actual motion. The pattern is so common on award-winning marketing sites that learning it unlocks a whole category of text effects.
When to Use Split-type
How Split-type Compares
Splitting.js was the original. Split-type is the TypeScript successor with ~5x the weekly downloads and more consistent line-splitting behavior. New projects should pick Split-type unless a tutorial or existing codebase already uses Splitting.js.
SplitText is a paid Club GreenSock plugin with the tightest integration with GSAP timelines. Split-type is MIT-compatible and free. For most projects the extra polish of SplitText is not worth the Club subscription; pair Split-type with free GSAP and you get 90% of the effect.
For a single character-by-character reveal you can write one @keyframes with animation-delay per character. At 3+ effects it becomes unmanageable. Split-type gives you clean DOM to target; an animation library does the timing.
Get Started with Split-type
npm install split-typeyarn add split-type<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script><h1 class="headline">Hello, world.</h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
// Split the headline into individual character spans.
const split = new SplitType(".headline", { types: "chars" });
// Animate each character in with GSAP, staggered.
gsap.from(split.chars, {
opacity: 0,
y: 20,
duration: 0.6,
stagger: 0.04,
ease: "power3.out"
});
// split.revert() restores the original DOM if you need to re-split on resize.
</script>