Tiny JS library to glitch anything on the web
Add an optional pulse animation to the glitch, add MIT licence file
pulse option
ease-in-out to avoid having a stepped pulse which would not look good= false)scale number determines the final pulse scale (playground uses 2 as default value)2kB to 2.1kB to allow for a bit of marginN/A
N/A
Add new createContainers option that allows not to modify the DOM for better compatibility with wrapper libraries react-powerglitch and particularly vue-powerglitch.
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
*/
N/A
N/A
Full support for glitching inline elements, fix bold artefact when glitching text, add API full documentation from TSDoc comments
<div>hello <span class='glitch'>world</span></div>)<p> element to playgroundgetDefaultTimingCss function2.0.2)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.
PowerGlitch.glitch() return { containers, startGlitch, stopGlitch }
containers: Containers for each glitched element.startGlitch(): Manually start the glitch.stopGlitch(): Manually stop the glitch.hover-triggered play mode for simplicity and symmetry with click, since the effect could be achieved with animation control callbacks.click play mode.manual play mode (never plays until the animation control callbacks are called).NodeList (result from querySelectorAll) as the elements to glitch in PowerGlitch.glitch()
HTMLElement as the elements to glitch in PowerGlitch.glitch()
imageUrl option, replaced with html and now accepts any valid html string.jest testing with >99% statement coverage.N/A
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 ☺
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.Show code section in the playground lets you copy/paste the options object to use it in your code directly.recommended defaults buttons to check out good-looking effects for the 3 play modes.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.
<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)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.PowerGlitch.glitch(selector), if the specified selector matches more than one element, all will be glitched using the same animation sequence.none
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.