Text Animation Snippets — Free HTML CSS JS Text Effects

44 text animation effects · Typewriter, Text Scramble, Glitch, Gradient & Shiny Text, Split Text, Wave, Rotating Words, Scroll Reveals & more · Exports to React, Vue, Angular & Tailwind

What's included

Features

44 text animation effects: typewriter, scramble, glitch, gradient, shiny, wave, split text, rotating words, scroll reveals and particle text

Plain HTML, CSS and vanilla JavaScript for most snippets, with GSAP, Typed.js and Splitting.js versions where a library is the better tool

Live editor: change the words, timing and colours and see the animation update at once

Per-letter and per-word effects built on one split-and-stagger pattern you can reuse

Scroll-linked text with IntersectionObserver or GSAP ScrollTrigger, with no heavy scroll listeners

Real text stays in the DOM, so it remains readable by search engines, screen readers and copy and paste

GPU-friendly animations (transform and opacity) and an easy prefers-reduced-motion switch

One-click export to HTML, React, Vue, Angular and Tailwind CSS

About this category

Text Animation Snippets — 44 Free Effects: Typewriter, Scramble, Glitch, Split Text, Scroll Reveals

Text is the first thing a visitor reads, so a little motion on a headline does more than almost any image: it tells people where to look, makes a hero feel alive and gives a brand a voice. This collection gathers 44 text animation effects in plain HTML, CSS and vanilla JavaScript, plus a few that use GSAP, Typed.js or Splitting.js. Each one runs live in the editor, so you can change the words, speed and colours and see the result at once, then copy the code or export it to React, Vue, Angular or Tailwind.

The classic text effects

The Typewriter Effect types a line one letter at a time with a blinking cursor. Text Scramble shuffles random characters until each letter settles on the right one, which gives the "decoding" look used on developer and sci-fi sites. Glitch Text splits the colour channels with clip-path and offsets. Animated Gradient Text slides a gradient through the letters with background-clip: text, and Shiny Text sweeps a highlight across a word. Wave Text bounces each letter in turn, and the Marquee scrolls a line of text forever.

Split text, per-letter and per-word animation

Most advanced text animation starts by splitting a line into letters or words so each can move on its own. Split Text Animation does it in plain JavaScript, GSAP SplitText Reveal does it with GSAP, and Splitting.js CSS Stagger writes CSS variables so the stagger is pure CSS. From there the collection goes further: Letter Gravity Drop, Character Wobble on hover, 3D Character Flip Reveal, Word Spring Bounce and Text Scatter and Assemble.

Rotating words and hero headlines

A headline that cycles through words ("Build faster, ship smarter, scale easier") says more in the same space. GSAP Text Rotator, Word Flip Hero, Typed.js Rotating Headline and Typed.js Multi-String Hero are ready to drop into a hero section.

Text that reacts to scroll

Scroll turns reading into an interaction. Text Reveal on Scroll fills a paragraph word by word as you scroll, Scroll Text Clip Reveal wipes lines in, Scroll Typewriter types as the page moves, Scroll Text Draw draws the outline of a word, and Scroll Letter Stagger and Scroll Word Wheel animate letters and words.

Canvas, SVG and variable fonts

For bigger effects there are Canvas Particle Text Formation (particles that gather into a word), SVG Liquid Text Wave, SVG Mask Sweep Text Reveal and Variable Font Weight Breathe, which animates the font-weight axis of a variable font.

Built to be used in real pages

Every snippet is small, has no required dependencies unless the title names a library, and keeps the real text in the DOM so search engines, screen readers and copy and paste still work. Animations use transform and opacity where possible so they stay smooth, and you can respect the prefers-reduced-motion setting with one media query (see the FAQ below).

Real-world uses

Common Use Cases

Hero headlines that rotate or type themselves

Typed.js Rotating Headline, GSAP Text Rotator and Word Flip Hero show several value propositions in one headline slot, which is useful on SaaS, agency and portfolio landing pages.

Dark, techy and cyberpunk interfaces

Text Scramble, Glitch Text, Typewriter Glitch Gradient Reveal and Typing Code Editor give developer tools, game sites and hacker-style portfolios the right feel without images or video.

Premium brand and product pages

Shiny Text, Aurora Text, Animated Gradient Text and Sparkles Text add polish to a product name, a pricing headline or a launch announcement.

Scroll storytelling and long-form pages

Text Reveal on Scroll, Scroll Text Clip Reveal and Scroll Typewriter make people read a manifesto, a case study or an about page line by line instead of skimming it.

Learn how text animation works

Split Text, Splitting.js and Letter Gravity Drop show how a line becomes letters, how the stagger delay is calculated and how to animate each letter with CSS or GSAP.

Replace a text animation library with a few lines of code

Many sites load a whole library only for a typing or scramble effect. The vanilla versions here are a few dozen lines and add no weight to your bundle.

Got questions?

Frequently Asked Questions

Open the Typewriter Effect snippet. It keeps the full text in a variable, adds one character at a time with setTimeout, and shows a blinking cursor with a CSS animation. Change the text and the typing speed at the top of the script. For a CSS-only version you can animate width with the steps() timing function on a monospace font.

Wrap each letter or word in a span, then give each span a growing animation-delay (index times 40 ms is a good start). The Split Text Animation snippet does this in plain JavaScript, and Splitting.js and GSAP SplitText do it with a library. Keep an aria-label on the parent so screen readers read the original sentence, and mark the spans aria-hidden.

Not when the real text stays in the HTML, which is how these snippets are written. Search engines read the text in the DOM, not the animation. For accessibility, avoid animating text that must be read quickly, keep contrast high, and switch the motion off for people who ask for it with the prefers-reduced-motion media query.

Wrap the animation in @media (prefers-reduced-motion: no-preference), or add @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } and show the final text immediately. For JavaScript effects, check window.matchMedia("(prefers-reduced-motion: reduce)").matches and skip the animation.

A rotating headline (Typed.js Rotating Headline, GSAP Text Rotator or Word Flip Hero) works well when you have several short messages. A gradient or shiny headline suits a single strong line. Use one effect per screen, because several competing animations make the page harder to read.

Yes. Every snippet has export buttons for HTML, React (JSX), React with Tailwind, Vue 3 and Angular. For effects that need JavaScript, the export puts the logic in the right lifecycle hook (useEffect, onMounted or ngAfterViewInit) so the animation starts when the component appears.

The snippets are free to copy and use in personal and commercial projects. No account and no credit are required, though a link back is always appreciated.

All 44 text animations snippets, A to Z

Loading…