v2.5.0

🔥 Release preview

Add slice.cssFilters option to add a custom CSS filter string to the glitch effect

eg

glitch({
  "slice": {
    "cssFilters": "invert(71%) sepia(83%) saturate(453%) hue-rotate(145deg) brightness(95%) contrast(96%)"
  }
})

gives you a cyan glitched effect instead of the default random hue rotate applied to glitched layers:

🚀 Features

• Add new slice.cssFilters option

💻 Code quality

n/a

👥 Thanks

• @BtencateSphereon for suggesting the improvement

v2.4.0

🔥 Release preview

Add optional optimizeSeo flag (defaults to true) to prevent SEO impact

🚀 Features

• Add new optional flag optimizeSeo (defaults to true). When true, crawlers will be detected no glitch will be shown to them. This prevents duplicate content from being rendered for crawlers that execute JavaScript.
  • This optimization can be removed by setting optimizeSeo to false in the options.

💻 Code quality

• Added an exclusions for SonarCloud for the docs pages to stop false-positive issues from being raised.

👥 Thanks

• @AnixPasBesoin for raising the issue (#32)

v2.3.5

🐞 Bug fixes

• Fix types locations for node 22+ ESM bundle (#35)

👥 Thanks

@uncomplexity for raising concerns and creating the pull request 😊

v2.3.4

🐞 Bug fixes

• Provide both ESM & CJS bundles. New structure:
  • ./build/src/index.d.ts: type declaration
  • ./lib/index.esm.js: ESM bundle
  • ./lib/index.cjs: CJS bundle (same as before, but generated using esbuild rather than tsc)
  • ./dist/powerglitch.min.js: IIFE bundle (unchanged)
  • ./package.json: Add links to GH repo, specify CJS/ESM locations

👥 Thanks

@rklos for raising the issue

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)