Text Animations (SplitText)

Type animations with SplitText: splitting into chars/words/lines, staggered reveals, line masking, waiting for fonts, revert() for accessibility, combining with ScrollTrigger, and a reduced-motion fallback.

SplitText breaks a text element into chars, words, and/or lines wrapped in individual elements so each piece can be animated independently. As of GSAP 3.13, SplitText is free for everyone — no Club membership required.

import gsap from 'gsap'
import { SplitText } from 'gsap/SplitText'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP, SplitText)

const DURATION = 0.8
const EASE = 'power4.out'
const STAGGER = 0.02

Splitting into chars / words / lines