text-animations/split-text

Split Text

Preview

Reveal your words, one line at a time

● live previewing Vue (reference)

Props

Split bychars

Maskon

Stagger0.05s

Duration0.8s

Prerequisites

install terminal

SplitText and ScrollTrigger ship inside the gsap package (free since v3.13).

Component

source SplitText.vue

Usage

usage App.vue

API

Prop	Type	Default	Description
splitBy	`"chars" \| "words" \| "lines"`	`"chars"`	What to split the text into before staggering. Chars is the flashiest; words is lighter for longer copy.
mask	`boolean`	`true`	Clip each unit so the text rises from behind a hard edge — the polished reveal. Maps to GSAP's mask option.
stagger	`number`	`0.05`	Delay between each unit's animation, in seconds.
duration	`number`	`0.8`	Duration of each unit's animation, in seconds.
ease	`string`	`"power4.out"`	GSAP easing function for the reveal.
from	`Record<string, number \| string>`	`{ opacity: 0, y: "100%" }`	Starting GSAP state for each unit. Any tween vars — swap in x, rotate, or scale for a different entrance.
to	`Record<string, number \| string>`	`{ opacity: 1, y: 0 }`	Ending GSAP state for each unit.