Breakdance4fun Logo

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.

PowerGlitch

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="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>

Step 2

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

Step 3

And finally add this JavaScript code:

PowerGlitch.glitch('.glitch');
powerglitch-breakdance-codeblock

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:

PowerGlitch.glitch(
'.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:

https://7ph.github.io/powerglitch/#/playground

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

https://7ph.github.io/powerglitch/#/