GSAPTextEffects
Typography-focused animations that bring headings, paragraphs, and labels to life. Character-level splits, decode sequences, and distortion effects built with GSAP and SplitText.
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.
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 guideAdding 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 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.