v2.3.3

🐞 Bug fixes

• Fix an issue preventing to glitch multiple times an element when using query selectors.
  PowerGlitch.glitch() is now idempotent. It can be called multiple times using the same query selector, and the glitch effect will be updated based on the new options parameter.

👥 Thanks

@ValerioB88 for calling out the bug and for sponsoring 🚀

v2.3.0

🔥 Release preview

Add an optional pulse animation to the glitch, add MIT licence file

🚀 Features

• Implement an optional pulse animation controlled with the pulse option
  • When used with restricting the glitch time span, the pulse will coordinate itself to start at the same time than the glitch effect
  • When used without restricting the glitch time span, the pulse will take the whole duration
  • When used, easing will always be ease-in-out to avoid having a stepped pulse which would not look good
  • Defaults to not used (= false)
  • scale number determines the final pulse scale (playground uses 2 as default value)

🤔 Changes

• Increase max bundle size from 2kB to 2.1kB to allow for a bit of margin
• Add MIT licence file
• Add pulse option to the playground

💻 Code quality

• 100% line, branch coverage

🐞 Bug fixes

N/A

👥 Thanks

N/A

v2.2.0

🔥 Release preview

Add new createContainers option that allows not to modify the DOM for better compatibility with wrapper libraries react-powerglitch and particularly vue-powerglitch.

🚀 Features

• A new createContainers option is added (default: true). More information in the code comments:

    /**
     * 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
    */

🤔 Changes

• Add link to the React wrapper library react-powerglitch in README.md

💻 Code quality

• Code refactoring to optimize bundle size (still <2kb)

🐞 Bug fixes

N/A

👥 Thanks

N/A

v2.1.0

🔥 Release preview

Full support for glitching inline elements, fix bold artefact when glitching text, add API full documentation from TSDoc comments

🚀 Features

• Add API full documentation from TSDoc comments
• 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>)
• Add <p> element to playground

🤔 Changes

• Improve home page examples

💻 Code quality

• Improve documentation
• Optimize bundle size, removing non-necessary spaces in CSS properties and inlining getDefaultTimingCss function

🐞 Bug fixes

• Fix bold artefact when glitching text
• Fix glitch stop control when options.timing.iterations is Infinity (since 2.0.2)

👥 Thanks

• @468 for reporting an issue with glitch controls (#9)

v2.0.0

🔥 Release preview

New major version to support glitching any DOM element, add animation control callbacks, click play mode, add jest testing with >99% statement coverage and improve documentation/playground.

🚀 Features

• 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 switching play modes in playground.
• 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

🤔 Changes

• Updated documentation and playground to reflect the new changes.
• Removed imageUrl option, replaced with html and now accepts any valid html string.

💻 Code quality

• Added jest testing with >99% statement coverage.

🐞 Bug fixes

N/A

v1.2.0

🔥 Release preview

Retro-compatible release that adds support for triggering the glitch effect only when hovering the image, serving the library iife bundle through unpkg, improves the playground, and more ☺

🚀 Features

• Introduced a new playMode option to choose when to play the defined glitch animation:
  • always (default): Always be glitchin'.
  • hover-triggered: Start glitching hovering the image for the first time.
  • hover-only: Only glitch when hovering the image.
• The library is now served by unpkg.com.
• A Show code section in the playground lets you copy/paste the options object to use it in your code directly.

🤔 Changes

• Updated documentation to reflect the new changes (and fix a misleading example).
• Updated the playground with new recommended defaults buttons to check out good-looking effects for the 3 play modes.

💻 Code quality

• Switch case indent rule customized to force inner indentation.

🐞 Bug fixes

• Remove original image instead of hidding it (in some cases, the image would not be hidden because of conflicting CSS rules).

👥 Thanks

• @Code-Victor for suggesting the feature (#4)

v1.1.0

🔥 Release preview

Retro-compatible release that adds support for glitching <img> tags, support for glitching multiple elements at once, a new hideOverflow option, an updated documentation and github actions to enforce linting and bundle max size in kb. Read more below.

🚀 Features

• Glitch <img> directly. No need to add a placeholder container anymore for the animation, you can glitch existing images. Note that the recommended way to glitch images is still to add a placeholder div, but in some cases it is not possible (ex: interacting with an already built web page)
• New hideOverflow option, defaults to false. When set to true, the animation will be hidden when outside of the animation bounding rectangle. This is typically a case-by-case value to set, as generally for pictures it will look better with hideOverflow=true, but for images with transparent background it's best to let overflow visible.
• When calling PowerGlitch.glitch(selector), if the specified selector matches more than one element, all will be glitched using the same animation sequence.

🤔 Changes

• Improved usage guide with comprehensive tutorial

💻 Code quality

• ESLint recommended typescript/vue rules are now used
• New github action to check on every PR that linting passes and reports minified bundle size difference (2kb limit)

🐞 Bug fixes

none

v1.0.0 - First release of PowerGlitch

First release of PowerGlitch

PowerGlitch is a standalone library with no external dependencies. It leverages CSS animations to create a glitch effect on images. No canvas or DOM manipulations are needed. It weights around 1.5kb minified and gzipped and 4kb minified.