Get started with WFL

Just pick something below to explore my work, services and more.

Latest Articles
Latest Art
Latest Photo
Latest Music

Creating my own take on glitch animation using CSS & Javascript

July 23, 2019Will Leffert

I've been thinking about doing a glitch-themed design for a little bit recently, and thought I'd take some time today to write some code and try it out. Here's the codepen where you can check it out, and mess with it:

See the Pen
Randomized Glitch Animation
by Will Leffert (@WFL)
on CodePen.

Its pretty fun, and simple, to boot. I did the common multiple box-shadow technique with animation keyframes in CSS, but instead of just looping one set of keyframes, I set up 4, and triggered a different one via Javascript at random intervals (utilizing setInterval and setTimeout together).

I may go further with it; this one is pretty performant, as well as compatible (even moreso once you add in the prefixes, although I don't think I want to mess with older IE compatibility on it), but I'd like to maybe do some messing with positioning, or even slicing/pixelating. Who knows.

Enjoy the code, friends!