CSS Glitchy Text Reveal in 3 minutes

Looking for an interesting text animation on your next project? In this post, we’re going to make the following text reveal animation.

Glitchy text reveal in action 😎

To do this, we’ll leverage the power of CSS variable scope 💪

The Power (and Fun) of Scope with CSS Custom Properties | CSS-Tricks

For those in camp TL;DR, scroll down for the demos & code 👍

DISCLAIMER ⚠️

This effect is achievable with only HTML & CSS. I’m using a little JavaScript to enhance the markup. It makes things different on each refresh. I’ll also share a non-JavaScript version though 👍

MARKUP

The first thing we need is some markup ✅

Basic markup

JAVASCRIPT

Here’s that JavaScript.

JavaScript code to enhance our markup 💪

We are using the brilliant Splitting.js to slice up our text into spans.

Splitting.js

This enables us to dial in on individual characters 😎 Once we have the result, we loop over the character elements and apply inline CSS variables. These variables dictate what glitchy characters should show. The resulting markup for a character might look something like this.