008
AI ready

Glitch Text Effect

£5

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 intermediate
4 more details
text-animationglitchchromatic-aberrationhover-effect
Glitch Text Effect - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Glitch Text Effect demo in new tab

About this effect

A GSAP glitch effect built as a digital corruption engine for text, with four distinct styles: displacement shift, true RGB chromatic aberration, VHS scan slice, and character-level chaos. Every burst is randomised, so no two runs look the same, and each one reverts to clean, selectable text.

Read the full effect overview

The demo is a launch announcement whose four headline lines each carry one style on a slow loop of its own, so all four can be compared at a glance; hovering a line fires it again and one button fires the lot. Triggers cover hover, focus, click, scroll-into-view and a repeating interval, and the two channel colours of the RGB split are CSS custom properties.

What's included

8 items
  • Four glitch styles from one attribute: shift, rgb, slice, and all
  • True RGB chromatic aberration with independent channel offsets
  • VHS scan slice that clips the text into displaced horizontal bands
  • Character-level chaos that swaps glyphs and shakes them individually
  • Five triggers: hover, focus, click, scroll-into-view, and continuous interval
  • Three intensity presets plus per-element duration and interval control
  • data-glitch-trigger-all fires every glitch on the page from one button
  • Rate limited to 20fps and fully disabled under reduced motion (WCAG 2.3.1)

Perfect for

5 use cases
  • Cyberpunk and sci-fi themed website headers
  • Gaming landing pages and esports branding
  • Error page designs and 404 pages with personality
  • Music and event promotion sites
  • Tech startup hero sections with edgy aesthetics

How it works

2 sections

Each style drives a different mechanism. RGB split renders two extra copies of the text with CSS pseudo-elements and blends them with mix-blend-mode: screen, while GSAP writes the --rgb-x and --rgb-y custom properties in randomised steps. Shift builds a GSAP timeline of set() calls on x, y, skewX and scaleX with occasional snap-backs to zero.

Slice runs a requestAnimationFrame loop that clip-paths a random horizontal band and displaces it. Chaos wraps every character in its own span, swaps a share of them for symbols from the glyph pool, and shakes each one independently. All four are capped at one frame every 50ms so the flicker stays under the WCAG three-flashes-per-second limit.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Glitch Text Effect opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add glitch attributes to any text element:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

What the effect requires of your markup: a data-glitch element whose direct content is plain text. It reads textContent on init and writes it back after every burst, so anything nested inside (icons, <span> wrappers, links) is destroyed the first time the element glitches. Put the attribute on the innermost text element, not on a wrapper.

What is only the demo's CSS. Everything in style.css below the tokens (.showcase-*, .announce*, .prompt, .btn) is the demo's announcement page and can be deleted. What the effect actually needs is the .glitch-rgb block and the --glitch-r / --glitch-b / --rgb-x / --rgb-y custom properties. The demo's Mona Sans load is also the demo's own; the effect works on any face.

Retinting the RGB split. The two channel colours are CSS custom properties, not values in script.js: --glitch-r colours the copy offset left/up and --glitch-b the copy offset right/down. The demo sets them to yellow #fff500 and blue #2563eb on :root; set them on any ancestor (or on the glitching element itself) to change the tear for one headline without touching the script, which only writes the --rgb-x / --rgb-y offsets.

The non-obvious CSS the effect depends on:

  • rgb style only shows its colour fringing if the element also matches .glitch-rgb, because the two offset copies are ::before / ::after layers reading content: attr(data-text). The script adds that class itself during a burst; add it yourself if you want the layers to exist at rest.
  • Those layers cover the host's border box, so they inherit its padding and text alignment. If you restyle a glitching button, keep padding: inherit on them or the ghost copies will sit offset from the real label.
  • mix-blend-mode: screen needs a dark background underneath to read as chromatic aberration. On a light ground, switch the layers to multiply and use darker channel colours.
  • slice sets clip-path and an inline transform on the element each frame, so give it display: inline-block (or block); an inline run cannot be clipped or transformed.
  • shift writes x, y, skewX and scaleX. If you also animate that element's transform elsewhere, the two will fight; glitch a child instead.
  • Nothing is hidden at rest, so there is no pre-hide gate to restore: with JavaScript off, every element stays as plain, readable text.

Triggers

Attribute Behavior
data-glitch-hover Triggers on hover/focus (recommended for interactive elements)
data-glitch-click Triggers on click
data-glitch-continuous Auto-repeats at interval (recommended for always-on effects)
data-glitch-scroll Triggers once when scrolled into view (needs ScrollTrigger)
data-glitch-trigger-all Put on a button: one click fires every glitch on the page

Options

Attribute Values Default Description
data-glitch-style shift, rgb, slice, all shift Glitch effect type
data-glitch-intensity subtle, medium, intense medium Effect strength
data-glitch-duration Milliseconds 300 Effect duration per glitch
data-glitch-interval Milliseconds 3000 Repeat interval (continuous mode only)

Glitch Styles

shift

Rapid position displacement with skew distortion. Text jerks around erratically and snaps back.

HTML: Code snippet omitted: it ships with the download.

rgb

True RGB chromatic aberration: two colour channels (--glitch-r and --glitch-b) offset from centre in opposite directions. Uses CSS mix-blend-mode: screen for proper colour separation.

HTML: Code snippet omitted: it ships with the download.

Note: Add the glitch-rgb class to enable the CSS pseudo-element layers.

slice

Horizontal slice/scan line effect like VHS distortion.

HTML: Code snippet omitted: it ships with the download.

all

Combines shift displacement with character-level chaos for maximum glitch.

HTML: Code snippet omitted: it ships with the download.

Intensity Presets

Intensity Swap Chance RGB Offset
subtle 15% 4px
medium 35% 8px
intense 55% 14px

Accessibility

  • Respects prefers-reduced-motion: completely disabled for users who prefer reduced motion
  • Frame rate limited: maximum 20fps for flicker effects (WCAG 2.3.1 compliance: < 3 flashes/sec)
  • Continuous mode uses aria-live="off": prevents screen readers from announcing changes
  • Focus triggers: hover effects also work with keyboard focus
  • Semantic HTML: use <button> or <a> elements for interactive triggers

Browser Support

Modern browsers (ES6+). Not compatible with IE11.

Dependencies

  • GSAP 3.12+
  • ScrollTrigger plugin: only for data-glitch-scroll; the script checks for it and skips that trigger if the plugin is absent

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

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.

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.