GSAP Text Effects
Typography-focused animations that bring headings, paragraphs, and labels to life. Character-level splits, decode sequences, and distortion effects built with GSAP and SplitText.
Unlock everything for £39
All 89 premium effects and templates, plus every future effect and template we release. That's £0.43 per item.
Buy individually now: up to £10 comes off the Vault later
Animating Text with GSAP
Text animation goes beyond simple fade-ins. With GSAP SplitText, you can split headings into individual characters, words, or lines and animate each one independently. This opens up staggered reveals, wave effects, scramble sequences, and kinetic typography that feels intentional.
The key to good text animation is restraint. A subtle character stagger on a hero heading draws attention without overwhelming the reader. A decode effect on a loading state provides visual feedback. Glitch typography sets a tone. Each pattern serves a purpose beyond decoration.
SplitText handles the DOM manipulation of wrapping characters in spans, preserving accessibility by keeping the original text in the DOM for screen readers. Combined with GSAP timelines, you can sequence text animations precisely: split, animate in, hold, animate out.
These effects work with any typeface and respond to viewport size. They include reduced-motion fallbacks that show text immediately without animation, ensuring content remains accessible to all users.
How to animate text with GSAP
Split a heading into characters with the SplitText plugin, then stagger a tween across them. The original text stays in the DOM, so it remains readable and indexable.
- 01
Register SplitText
Load GSAP and the SplitText plugin and register it once.
- 02
Split the element
Create a SplitText instance with type "chars" (or "words" / "lines") to wrap each unit in its own span.
- 03
Stagger the tween
Animate the returned chars array with a small stagger so characters cascade in rather than appear at once.
- 04
Wait for fonts
Split after document.fonts.ready so the browser measures the real typeface, not a fallback, and avoids layout shift.
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);
const split = new SplitText(".headline", { type: "chars" });
gsap.from(split.chars, {
y: 20,
opacity: 0,
duration: 0.6,
ease: "power2.out",
stagger: 0.02,
});Text Animations at a glance
| Effect | What it does | Built with | Difficulty |
|---|---|---|---|
| Text Scramble Decode | Cipher-style text animation that scrambles characters and decodes to reveal content. | ScrollTrigger, text-animation | intermediate |
| Split Text Stagger Reveal | Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle. | ScrollTrigger, SplitText, text-animation | intermediate |
| Glitch Text Effect | Four glitch styles from one engine: displacement shift, RGB chromatic aberration, VHS scan slice, and character-level chaos. | ScrollTrigger, text-animation | intermediate |
| Text Hover Distortion | Characters react to cursor proximity with push, pull, wave, or rotation effects. | text-animation | advanced |
| Typewriter Text | A sharp terminal-style typewriter that types, holds, accelerates through deletion, and cycles to the next phrase in sync with cursor and progress signals. | ScrollTrigger, text-animation | beginner |
| Infinite Marquee with Mouse Control | Continuous scrolling marquees with mouse-based speed control. | ScrollTrigger, marquee | intermediate |
| Scroll Velocity Skew | Kinetic type that smears with scroll speed — shear, stretch, motion blur and chromatic fringing in one velocity-driven response — then whips back line by line with an elastic overshoot. | ScrollTrigger, velocity-reactive | intermediate |
| Elastic Repel Headline | A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip. | hover-effect | advanced |
| Scroll Text Highlight | A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. | ScrollTrigger, SplitText, scroll-reveal | intermediate |
| Split-Flap Board | Airport-departure-board character flipping for headlines, stats and status rows, with each cell rolling on a real 3D hinge and the board resolving as a staggered wave. | ScrollTrigger, split-flap | advanced |
| Physics Word Pile | Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing. | physics | advanced |
Related Guides
Text Animations with GSAP: 4 Approaches
Split reveals, scramble decodes, glitch effects, and cursor reactions. Learn when each text animation approach fits and how to build them.
Read guide
Adding a Text Scramble Effect to WordPress
Add a simple text decode animation to your WordPress site using GSAP. Text appears scrambled and reveals on scroll - no plugin required.
Read guide
Adding an Infinite Marquee to WordPress
Build a smooth infinite marquee for WordPress using GSAP. Scrolling text, logo strips, and ticker bars with no plugin required.
Read guideFrequently Asked Questions
What is GSAP SplitText?
SplitText is a GSAP plugin that splits text elements into characters, words, or lines, wrapping each in a span for individual animation. It handles complex cases like multi-line text, nested elements, and special characters while keeping the original text accessible.
Do text animations affect SEO?
No. The actual text content remains in the DOM and is fully indexable by search engines. SplitText wraps characters in spans but preserves the text itself. Screen readers also read the content normally.
Can I use these text effects with any font?
Yes. These effects animate CSS transforms and opacity on individual text elements. They work with any web font, system font, or custom typeface. Just make sure fonts are loaded before splitting text to avoid layout shifts.
How do I trigger text animations on scroll?
Combine text effects with ScrollTrigger. Split the text on page load, then use ScrollTrigger to play the animation when the element enters the viewport. All text effects here include scroll-triggered variants in their documentation.