How to add a Glitch effect with PowerGlitch

With the PowerGlitch JS library, it's simple to incorporate a glitch effect into any breakdance element. The effect can be activated automatically, on hover or click.


A tiny library to glitch anything on the web

Step 1

Install the library. You can use a Snippet Manager - which is often the most convenient way - or you can also put everything in a Code Block.

<script src=""></script>

Step 2

Add the .glitch class to the element you want to "glitch".

Step 3

And finally add this JavaScript code:


Glitch the Gallery!

Here is a more advanced example, with some custom options.
As you can see, we target the images of the gallery element. And the glitch effect will work on hover:

'.ee-gallery img',
"playMode": "hover",
"createContainers": true,
"hideOverflow": false,
"timing": {
"duration": 250,
"iterations": 1000,
"easing": "linear"
"glitchTimeSpan": {
"start": 0,
"end": 1
"shake": {
"velocity": 15,
"amplitudeX": 0.2,
"amplitudeY": 0.2
"slice": {
"count": 15,
"velocity": 20,
"minHeight": 0.02,
"maxHeight": 0.15,
"hueRotate": true
"pulse": false

Don't worry, it's actually very easy to change the options. There is a 'playground' page where you can visually change the options and get the code:

As usual, for more info, check the official page: