GSAP Text Effects

GSAP text effects for headings, statements and reading passages: oversized lettering that follows a curved path, spirals through depth or unfolds like paper, alongside split reveals, scramble, glitch, typewriters and hover distortion. Every one has a live demo and the full source.

21 effects, 2 free, no build step

Effects Pass

£50

Every current and future premium effect. Includes 99 items now, plus every future release in this line.

The Vault

£99

All 236 premium items in the Vault library, plus future additions to the library.

Browse effects

Inflatable Type - A headline of glossy, air-filled 3D balloon letters on curling ribbon strings
100 New £5

Inflatable Type

A headline of glossy, air-filled 3D balloon letters on curling ribbon strings. Press one and its surface dents while the rest bulges, sweep across to knock letters into their neighbours with their strings trailing, and tap to pump a letter up until it squeaks back into place.

webgl-shaderspring-physics
Receipt Printer Scroll - Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter
102 New £5

Receipt Printer Scroll

Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter.

ScrollTrigger scrub
Shadow Assembly - Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture
099 New £5

Shadow Assembly

Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture. Release to hold its position, then choose Align light to restore the artwork.

webgl-shaderpointer-effects
Serpentine Text Scroll - Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve
076 £5

Serpentine Text Scroll

Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve.

ScrollTrigger text-animation
Type Helix - Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils
077 £5

Type Helix

Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils.

ScrollTrigger text-animation
Folded Type Scroll - A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension
078 £5

Folded Type Scroll

A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension.

ScrollTrigger text-animation
Scroll Story Flow - Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing
068 £5

Scroll Story Flow

Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. Scroll down through three expressive scenes.

ScrollTriggerCustomEase
Particle Morph Text - A headline made of tens of thousands of GPU particles that dissolves in a gust and re-forms as the next word on click, while the cursor blows through the letters like wind
062 £5

Particle Morph Text

A headline made of tens of thousands of GPU particles that dissolves in a gust and re-forms as the next word on click, while the cursor blows through the letters like wind. three.js, one shader, GSAP core.

webgl-shaderparticle-system
Text Scramble Decode - A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real text
004 £5

Text Scramble Decode

A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real text. Scroll, hover, click or auto-play, in any accent colour.

ScrollTrigger text-animation
Split Text Stagger Reveal - Cinematic split-text reveals with masked movement, 3D rotation, blur, color-fringe energy, and a sharp staggered settle
007 £5

Split Text Stagger Reveal

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

ScrollTriggerSplitText
Glitch Text Effect - A GSAP glitch effect in four styles: displacement shift, RGB chromatic aberration, VHS scan slice and character-level chaos
008 £5

Glitch Text Effect

A GSAP glitch effect in four styles: displacement shift, RGB chromatic aberration, VHS scan slice and character-level chaos. Hover, click, scroll or interval.

ScrollTrigger text-animation
Text Hover Distortion - Characters react to cursor proximity with push, pull, wave, or rotation effects
009 £5

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, buttons anywhere on the page can switch mode live, and a second channel can tint or blur the characters nearest the pointer.

text-animationcursor-effects
Typewriter Text - A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks
f03 Free

Typewriter Text

A typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks.

ScrollTrigger text-animation
Infinite Marquee with Mouse Control - Continuous scrolling marquees with mouse-based speed control
002 £5

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.

ScrollTrigger marquee
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
026 £5

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
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
031 £5

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-effecttext-animation
Radial Headline Burst - A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle
066 £5

Radial Headline Burst

A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle.

ScrollTriggerSplitText
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
f07 Free

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.

ScrollTriggerSplitText
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
036 £5

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
Physics Word Pile - Display-type chips that fall, collide, tumble and stack under a real rigid body solver, with drag-and-fling throwing
038 £5

Physics Word Pile

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

physicscollision
Rotating Word Headline - A hero headline that cycles its highlighted word: shared letters glide into place, the marker stretches to fit, and the rest of the sentence flows smoothly into its new line breaks
088 New £5

Rotating Word Headline

A hero headline that cycles its highlighted word: shared letters glide into place, the marker stretches to fit, and the rest of the sentence flows smoothly into its new line breaks.

text-animationtext-rotation
Browse all 108 effects

Choose a GSAP text animation

For a heading arriving on screen, start with a split reveal. Animate words or lines with a short stagger so the reader can follow the message. Split Text Stagger Reveal demonstrates this; use fewer animated pieces for longer copy.

For a terminal line or a rotating short phrase, choose Typewriter Text. It reveals characters in order. Text Scramble Decode instead resolves a field of changing glyphs into the finished words, which suits a technical or coded visual theme. Keep essential instructions readable from the start.

For an expressive title, Glitch Text adds brief distortion. Keep bursts occasional and avoid repeating the treatment across body copy. Text Hover Distortion is a different choice: it responds to the pointer, so it should enhance text that already works on touch devices.

For an editorial paragraph, Scroll Text Highlight connects emphasis to reading progress. The unhighlighted words still need enough contrast to read before the animation reaches them. Use it for a focused passage rather than animating every paragraph.

Compare the live previews above, then use the six-approach text animation guide below for implementation examples. Each effect includes its own source and integration notes. Test the chosen pattern with your real copy, at narrow widths and with reduced motion enabled.

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

    Register SplitText

    Load GSAP and the SplitText plugin and register it once.

  2. 2

    Split the element

    Create a SplitText instance with type "chars" (or "words" / "lines") to wrap each unit in its own span.

  3. 3

    Stagger the tween

    Animate the returned chars array with a small stagger so characters cascade in rather than appear at once.

  4. 4

    Wait for fonts

    Split after document.fonts.ready so the browser measures the real typeface, not a fallback, and avoids layout shift.

Minimal example
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

Compare the 21 text animations in this category by what they do, technique, and difficulty.
Effect What it doesBuilt withDifficulty
Inflatable Type A headline of glossy, air-filled 3D balloon letters on curling ribbon strings. webgl-shader advanced
Receipt Printer Scroll Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter. ScrollTrigger, scrub advanced
Shadow Assembly Drag a low spotlight freely across the floor to reshape the word or monogram cast by a suspended matte black sculpture. webgl-shader advanced
Serpentine Text Scroll Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve. ScrollTrigger, text-animation intermediate
Type Helix Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils. ScrollTrigger, text-animation intermediate
Folded Type Scroll A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension. ScrollTrigger, text-animation intermediate
Scroll Story Flow Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. ScrollTrigger, CustomEase, pinning intermediate
Particle Morph Text A headline made of tens of thousands of GPU particles that dissolves in a gust and re-forms as the next word on click, while the cursor blows through the letters like wind. webgl-shader advanced
Text Scramble Decode A GSAP scramble text effect: characters cycle through random glyphs, then decode into the real text. 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 A GSAP glitch effect in four styles: 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 typewriter that types a line character by character, holds it, accelerates through deletion, and cycles to the next phrase, with optional cursor, status and progress hooks. 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
Radial Headline Burst A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle. ScrollTrigger, SplitText, scrub intermediate
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
Rotating Word Headline A hero headline that cycles its highlighted word: shared letters glide into place, the marker stretches to fit, and the rest of the sentence flows smoothly into its new line breaks. text-animation intermediate

Related guides

GSAP Text Animation: 6 Approaches and When to Use Each

Compare six GSAP text animations: split reveals, typewriter, scramble, glitch, scroll highlights and cursor reactions, with working code for each.

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.

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.

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.

How do I make a GSAP scramble text effect?

There are two routes. GSAP ships a ScrambleTextPlugin that cycles a tween target through random characters as it resolves, which is quickest if you already load the plugin. Or you build it on core GSAP: capture the original string, give each character position a randomised resolve threshold, and cycle the unresolved positions through a glyph pool on requestAnimationFrame. The Text Scramble Decode effect here takes the second route, and adds five decode directions, custom character sets, and scroll, hover, click and auto-play triggers.

What is a GSAP glitch effect?

A short burst of digital corruption on text: the element displaces, its colour channels separate into RGB fringing, horizontal bands slice and shift like a bad VHS tape, or individual glyphs swap for symbols before snapping back. GSAP drives the randomised timing so no two bursts look alike. The Glitch Text effect here puts all four styles behind one attribute and rate-limits the flicker to stay inside the WCAG three-flashes-per-second limit.

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.

Browse all effects What GSAP effects are
Related categories
Hover & CursorScroll Effects

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.