SplitText and typography
Live text animation examples built with GSAP SplitText: character, word and line reveals, masked headlines and kinetic type. Free demos; exact prompts and source for subscribers.
SplitText breaks a heading into characters, words or lines so each can be animated separately: staggered reveals, masked lines rising into place, letters that react to the cursor. It is the base of most animated headlines on modern sites.
The examples below are real effects and templates from the library that use it. Each runs live with knobs for stagger, speed and direction, and keeps the heading readable for screen readers and for visitors with reduced motion.
Text animation is easy to overdo. These effects are tuned to be read: they finish quickly, they do not hide meaning behind motion, and they keep the headline accessible while it animates.
Showing 12 · 11 effects and 68 templates use this
Featured light A pinned keynote paragraph of large serif words that light from 20% to 100% opacity one by one as you scroll through +=250% of pinned travel (SplitText words, scrub 0.6), the current word glowing lime before it settles; hairline progress + word counter.
Featured light A headline is split into characters that rise out of a masked line one after another, followed by a soft fade-in of the supporting copy and a replay button.
light A two-line serif headline bursts apart from the cursor: characters fly outward along radial vectors with random spin and blur, the nearest ones furthest. Leaving springs them back with an elastic, out of order; on touch a tap plays the whole burst.
light A two-line serif headline floats on a travelling sine wave: every character bobs, tilts along the slope and swells slightly on the crests. Near the pointer the amplitude rises sharply, then settles back to a lazy idle wave with inertia.
light Headline characters swing in from a 90° rotateX (or rotateY) with real perspective and a z-translate as each heading enters the viewport; lines are masked so the letters appear to rise out of the page.
light Luxury CTAs whose label is two stacked SplitText copies in a mask: on hover the top characters roll up and out while the second copy rises in, 0.02s apart, as the arrow slides out and its twin slides in and a hairline draws across.
light A full-screen preloader counts 0→100 in a huge serif numeral while a hairline fills; the number and label slide out of their masks, two panels split open and the hero headline rises as its image settles from 1.15 to 1.
light A large serif paragraph whose words fill from a muted ink to full text colour as each one crosses the viewport centre, scrubbed by scroll — plus a marker-style accent highlight that draws itself behind two key phrases.
Featured medium A complete luxury launch page in one motion language: a counted preloader, a masked hero over a settling image, a pinned canvas bottle that turns to reveal three callouts, a word-by-word story, a pinned sideways gallery and a footer wordmark that fills.
Featured light A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.
WebGL E-bike launch template for an invented Rotterdam brand: a photo-real 3D bike rolls in, then the scroll tracks the frame, drops the battery, explodes the motor, swaps colours and counts the range.
WebGL Serum skincare template for an invented Copenhagen brand: a photo-real frosted dropper bottle; scroll lifts the glass pipette, gathers one drop, lets it fall and lands it as a real macro video.
A headline should be readable before the animation ends. Check the timing and keep delays short for the first screen.
Split headings keep their full text for assistive technology and show the whole line without motion when reduced motion is on.
Line splits must be recalculated on resize. The effects here do so, and avoid breaking on narrow screens.
Prompts Pro $169/month · All Access $299/month (prompts and source for everything) · single template $39 one-time. See pricing.
SplitText is part of GSAP, which is free to use under its current licence. Check GSAP's own terms for your project.
Not when the real text stays in the HTML, as it does here. The animation changes how it appears, not what is in the page.
Yes, as long as the licence allows web use. The prompts note which font settings to keep so the split lines stay aligned.
The help page has a ready fix prompt for "the animation is not playing" and for changed motion values.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…