Glitch Images Using CSS Animations – PowerGlitch

Preview:

Description:

PowerGlitch is a lightweight, highly customizable, dependency-free JS library for glitching any DOM elements (image, button, div containing anything, etc) on the fly directly from your browser using CSS3 animations.

How to use it:

1. Install & download the package.

# Yarn
$ yarn add powerglitch
# NPM
$ npm i powerglitch

2. Import the PowerGlitch.

// ES6+
import { PowerGlitch } from 'powerglitch'
// ES5+
const PowerGlitch = require('powerglitch').PowerGlitch
// Browser
<script src="./dist/powerglitch.min.js"></script>

3. Add glitch elements to the page.

<img src='1.png' class='glitch' />
<div class='glitch'>
  ...
</div>

4. Initialize the PowerGlitch on the glitch element. That’s it.

PowerGlitch.glitch('.glitch')

5. Config the glitch effect by overriding the default options and passing the options object as the second parameter to the glitch method.

PowerGlitch.glitch(
  '.glitch',
  {
    /**
    * Html to glitch. If not provided, will use the elements themselves.
    * If provided, all elements should have an `innerHTML` property.
    */
    html?: string,
    /**
      * Whether to create the 2 containers (one containing the other) necessary to create the glitch animation (defaults to true).
      * @remarks
      * The glitch effect relies on cloning the glitched element, and stacking them on top of the others inside 2 containers (one containing the other).
      * The embedded container is called the layer container, it has grid display and stacks its children, which are the original element and its cloned versions.
      * The top-level container replaces the original element (and the element is moved inside the layer container)
      * This logic is necessary to ensure layout consistency before/after the glitch, and to create the actual glitch effect with CSS.
      * In short, this maximizes compatibility for gitching about anything, but has to rearrange the DOM for that purpose.
      * 
      * In some cases, it is better to handle this logic of two containers elsewhere than in PowerGlitch.
      * For that, this flag should be false, which will make PowerGlitch.giltch(..) assume:
      *  - That the first argument to glitch(..) is the layer container itself
      *  - That the first child of the layer container is the element to glitch
      * And will:
      *  - Clone the element to glitch the required amount of times, and add the clones at the same level than the element to glitch in the layer container
      */
    createContainers: boolean,
    /**
    * Play mode. 'always', 'hover', 'click' and 'manual'
    */
    playMode: PlayModes,
    /**
    * Whether to hide the glitch animation when it goes out of the bounding rectangle.
    */
    hideOverflow: boolean,
    /**
    * Timing of the animation.
    */
    timing: {
      /**
       * Duration of the animation loop in milliseconds.
       */
      duration: number,
      /**
       * Number of times the animation should repeat. Set to `Infinity` to repeat forever.
       */
      iterations: number,
      /**
       * Ease animation for all layers. Defauls to a sequential easing (no transition).
       */
      easing?: string,
    },
    /**
    * Specify if the animation should always glitch uniformly (if false) or if it should glitch at a given time.
    * If start and end are set, the animation will glitch between those two times, and the peak glitch will be at the middle.
    * glitchTimeSpan.end should be greater than glitchTimeSpan.start. Otherwise, the glitch will not happen.
    */
    glitchTimeSpan: false | {
      /**
       * Start time of the glitch in percent, between 0 and 1.
       */
      start: number,
      /**
       * End time of the glitch in percent, between 0 and 1.
       */
      end: number,
    },
    /**
    * Whether the base layer should shake. If not set to false, the base layer will shake in the given amplitude.
    * The shake animation respects the glitch time span constraint, if set.
    */
    shake: false | {
      /**
       * Number of steps to compute for each layer per second of animation.
       */
      velocity: number,
      /**
       * Max X amplitude for the shake animation.
       */
      amplitudeX: number,
      /**
       * Max Y amplitude for the shake animation.
       */
      amplitudeY: number,
    },
    /**
    * Slice layers are the base animation to give the glitch effect. They clip a part of the element and move it somewhere else.
    * The slice animation respects the glitch time span constraint, if set.
    */
    slice: {
      /**
       * Number of layers to generate.
       */
      count: number,
      /**
       * Number of steps to compute for each layer per second of animation.
       */
      velocity: number,
      /**
       * Minimum height in percent for a given slice, between 0 and 1.
       */
      minHeight: number,
      
      /**
       * Maximum height in percent for a given slice, between 0 and 1.
       */
      maxHeight: number,
      /**
       * Whether the hue should rotate for the given slice.
       */
      hueRotate: boolean,
    },
    /**
    * Pulse layer adds a pulsing effect to the glitch.
    */
    pulse: false | {
      /**
       * Max scale
       */
      scale: number,
    },
  },
)

Changelog:

v2.3.2 (01/23/2023)

• Bugfix

v2.3.0 (11/30/2022)

• Implement an optional pulse animation controlled with the pulse option
• Increase max bundle size from 2kB to 2.1kB to allow for a bit of margin

v2.2.0 (09/22/2022)

• Add support for createContainers option to not modify DOM layout
• Code refactoring to optimize bundle size

v2.1.0 (09/18/2022)

• Use CSS grid to better stack elements (fixes the incorrect stacking of paragraph elements)
• Support for glitching inline elements (e.g. <div>hello <span class=’glitch’>world</span></div>)

v2.0.2 (09/12/2022)

• Optimize bundle size

v2.0.1 (09/09/2022)

• Bugfix

v2.0.0 (09/08/2022)

• Made possible to glitch any DOM element (image, button, div containing anything, etc).
• Made PowerGlitch.glitch() return { containers, startGlitch, stopGlitch }
• containers: Containers for each glitched element.
• startGlitch(): Manually start the glitch.
• stopGlitch(): Manually stop the glitch.
• Removed hover-triggered play mode for simplicity and symmetry with click, since the effect could be achieved with animation control callbacks.
• Added click play mode.
• Added manual play mode (never plays until the animation control callbacks are called).
• Added support for passing a NodeList (result from querySelectorAll) as the elements to glitch in PowerGlitch.glitch()
• Added support for passing an array of HTMLElement as the elements to glitch in PowerGlitch.glitch()
• Improved homepage to add examples reflecting the new features