GSAP Text Animations

Over 29

GSAP text animations 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. 29 effects, 2 free, no build step.

The Vault. Every item in the library, including the Vault exclusives, and everything added to it.

£99 Get the Vault See inside the Vault Browse these effects

Browse effects

Category

All164 ScrollZoomTextHoverImageRevealSlidersSVGBackgroundWebGLLoadingLiquid

29 effects

    Stretch Type Reveal - Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen New
    166 £7

    Stretch Type Reveal

    Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen.

    ScrollTrigger pinning
    Inline Image Headline - Pinned scroll headline with a picture set as a word in the sentence New
    153 £7

    Inline Image Headline

    Pinned scroll headline with a picture set as a word in the sentence. Scrolling grows the small pill to full bleed, and the words around it are pushed out along the line as real type.

    ScrollTrigger pinning
    Text Roll Hover - Nav links and button labels that roll over letter by letter like little lit cubes, built on GSAP SplitText, reacting to how fast the pointer arrives and rippling into neighbouring links
    147 £7

    Text Roll Hover

    Nav links and button labels that roll over letter by letter like little lit cubes, built on GSAP SplitText, reacting to how fast the pointer arrives and rippling into neighbouring links.

    SplitText text-animation
    Rotating Text Badge - The circular spinning text badge from studio sites, built on GSAP ScrollTrigger and InertiaPlugin: it picks up spin from scroll speed, coasts back to idle and turns its arrow to face the pointer
    148 £7

    Rotating Text Badge

    The circular spinning text badge from studio sites, built on GSAP ScrollTrigger and InertiaPlugin: it picks up spin from scroll speed, coasts back to idle and turns its arrow to face the pointer.

    ScrollTriggerInertiaPlugin
    Handwriting Draw - A signature or hand-lettered word that writes itself stroke by stroke, in the right order and with pen pressure, built on GSAP DrawSVGPlugin and MotionPathPlugin
    149 £7

    Handwriting Draw

    A signature or hand-lettered word that writes itself stroke by stroke, in the right order and with pen pressure, built on GSAP DrawSVGPlugin and MotionPathPlugin.

    DrawSVGMotionPathPlugin
    Text Mask Zoom - A pinned hero opens on one huge word cut out of the page with a film playing through its letters
    150 £7

    Text Mask Zoom

    A pinned hero opens on one huge word cut out of the page with a film playing through its letters. Scroll flies the camera through the hole in one letter until the film is full bleed, then the real heading rises over it. Built on GSAP ScrollTrigger.

    ScrollTrigger mask-reveal
    Text Outline Reveal - Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal
    106 £7

    Text Outline Reveal

    Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal.

    svg-line-drawtext-animation
    Variable Font Pressure - A pointer-driven type wave that widens and weights real variable-font glyphs while neighbouring letters compress and the word holds its width
    105 £7

    Variable Font Pressure

    A pointer-driven type wave that widens and weights real variable-font glyphs while neighbouring letters compress and the word holds its width.

    variable-fonttext-animation
    Inflatable Type - A headline of glossy, air-filled 3D balloon letters on curling ribbon strings
    100 £7

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

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

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

    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, driven by GSAP ScrollTrigger
    077 £7

    Type Helix

    Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils, driven by GSAP ScrollTrigger.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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 164 effects

    Quick view

    View product

    Loading demo

    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 29 text animations in this category by what they do, technique, and difficulty.
    Effect What it doesBuilt withDifficulty
    Stretch Type Reveal Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen. ScrollTrigger, pinning intermediate
    Inline Image Headline Pinned scroll headline with a picture set as a word in the sentence. ScrollTrigger, pinning intermediate
    Text Roll Hover Nav links and button labels that roll over letter by letter like little lit cubes, built on GSAP SplitText, reacting to how fast the pointer arrives and rippling into neighbouring links. SplitText, text-animation beginner
    Rotating Text Badge The circular spinning text badge from studio sites, built on GSAP ScrollTrigger and InertiaPlugin: it picks up spin from scroll speed, coasts back to idle and turns its arrow to face the pointer. ScrollTrigger, InertiaPlugin, svg-path intermediate
    Handwriting Draw A signature or hand-lettered word that writes itself stroke by stroke, in the right order and with pen pressure, built on GSAP DrawSVGPlugin and MotionPathPlugin. DrawSVG, MotionPathPlugin, ScrollTrigger, svg-path intermediate
    Text Mask Zoom A pinned hero opens on one huge word cut out of the page with a film playing through its letters. ScrollTrigger, mask-reveal intermediate
    Text Outline Reveal Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal. svg-line-draw intermediate
    Variable Font Pressure A pointer-driven type wave that widens and weights real variable-font glyphs while neighbouring letters compress and the word holds its width. variable-font intermediate
    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, driven by GSAP ScrollTrigger. 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

    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's ScrambleTextPlugin, free like every GSAP plugin, cycles a text tween through random characters as it resolves: the quickest option for a single line you animate yourself. The Text Scramble Decode effect here is the finished version for a real page: five decode directions, custom character sets, accent-coloured glyphs with steady line spacing, scroll, hover, click and auto-play triggers, and reduced-motion handling built in.

    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. Most text effects here document a scroll-triggered setup; the pointer-driven ones, such as the repelling headline, respond to interaction instead.

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