Glitch Images Using CSS Animations – PowerGlitch

Category: Animation , Javascript , Recommended | July 24, 2022
Author:7PH
Views Total:0 views
Official Page:Go to website
Last Update:July 24, 2022
License:MIT

Preview:

Glitch Images Using CSS Animations – PowerGlitch

Description:

PowerGlitch is a lightweight, highly customizable, dependency-free JS library for glitching any images 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. Create an empty container to hold the image.

<div id="example"></div>

4. Initialize the PowerGlitch and define the path to your image. That’s it.

PowerGlitch.glitch(
  '#example',
  {
    imageUrl: '/path/to/image.png'
  },
)

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(
  '#example',
  {
    /**
     * Background color. Use 'transparent' not to set a background color.
     */
    backgroundColor: string,
    /**
     * 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 image and move it somewhere else.
     * If not set to false, the slice layers will be generated.
     * The slice animation respects the glitch time span constraint, if set.
     */
    slice: false | {
        /**
         * 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,
    },
  },
)

You Might Be Interested In:


Leave a Reply