# GSAP Text Effects

> Copy-paste GSAP text animations. Split text reveals, decode effects, glitch typography, and hover distortion patterns for modern websites.

Canonical: https://gsapvault.com/categories/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.

## 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.

1. **Register SplitText:** Load GSAP and the SplitText plugin and register it once.
2. **Split the element:** Create a SplitText instance with type "chars" (or "words" / "lines") to wrap each unit in its own span.
3. **Stagger the tween:** Animate the returned chars array with a small stagger so characters cascade in rather than appear at once.
4. **Wait for fonts:** Split after document.fonts.ready so the browser measures the real typeface, not a fallback, and avoids layout shift.

```js
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](https://gsapvault.com/effects/text-decode) | Cipher-style text animation that scrambles characters and decodes to reveal content. | ScrollTrigger, text-animation | intermediate |
| [Split Text Stagger Reveal](https://gsapvault.com/effects/split-text-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](https://gsapvault.com/effects/glitch-text) | 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](https://gsapvault.com/effects/text-hover-distortion) | Characters react to cursor proximity with push, pull, wave, or rotation effects. | text-animation | advanced |
| [Typewriter Text](https://gsapvault.com/effects/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](https://gsapvault.com/effects/infinite-marquee) | Continuous scrolling marquees with mouse-based speed control. | ScrollTrigger, marquee | intermediate |
| [Scroll Velocity Skew](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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 |

## Effects in This Category

### Text Scramble Decode

Cipher-style text animation that scrambles characters and decodes to reveal content. Scroll-triggered, hover, and auto-play modes with custom timing.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/text-decode)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/text-decode.md)

### Split Text Stagger Reveal

Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/split-text-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/split-text-reveal.md)

### Glitch Text Effect

Four glitch styles from one engine: displacement shift, RGB chromatic aberration, VHS scan slice, and character-level chaos. Hover, click, scroll or continuous triggers.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/glitch-text)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/glitch-text.md)

### Text Hover Distortion

Characters react to cursor proximity with push, pull, wave, or rotation effects. The pointer field can be read from a whole section, and buttons anywhere on the page can switch mode live.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/text-hover-distortion)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/text-hover-distortion.md)

### 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.

- Tier: free · Difficulty: beginner
- [View effect](https://gsapvault.com/effects/typewriter-text)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/typewriter-text.md)

### Infinite Marquee with Mouse Control

Continuous scrolling marquees with mouse-based speed control. Rewind, pause, or fast-forward with cursor position. Uses GSAP quickTo for 60fps.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/infinite-marquee)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/infinite-marquee.md)

### 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.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/scroll-velocity-skew)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-velocity-skew.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/elastic-repel-headline)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/elastic-repel-headline.md)

### 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.

- Tier: free · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/scroll-text-highlight)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-text-highlight.md)

### 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.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/split-flap-board)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/split-flap-board.md)

### Physics Word Pile

Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/physics-word-pile)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/physics-word-pile.md)

## Related Tutorials

- [Text Animations with GSAP: 4 Approaches](https://gsapvault.com/blog/text-animations-gsap) ([Markdown](https://gsapvault.com/blog/text-animations-gsap.md)): Split reveals, scramble decodes, glitch effects, and cursor reactions. Learn when each text animation approach fits and how to build them.
- [Adding a Text Scramble Effect to WordPress](https://gsapvault.com/blog/text-scramble-wordpress) ([Markdown](https://gsapvault.com/blog/text-scramble-wordpress.md)): Add a simple text decode animation to your WordPress site using GSAP. Text appears scrambled and reveals on scroll - no plugin required.
- [Adding an Infinite Marquee to WordPress](https://gsapvault.com/blog/infinite-marquee-wordpress) ([Markdown](https://gsapvault.com/blog/infinite-marquee-wordpress.md)): Build a smooth infinite marquee for WordPress using GSAP. Scrolling text, logo strips, and ticker bars with no plugin required.

## Frequently 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.

## Related Categories

- [GSAP Hover Effects](https://gsapvault.com/categories/gsap-hover-effects)
- [GSAP Scroll Animations](https://gsapvault.com/categories/gsap-scroll-animations)
- [GSAP Cursor Effects](https://gsapvault.com/categories/gsap-cursor-effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt