Vanilla Disintegrate — Modern and Impressive Animations for the Web

Description and use

Vanilla Disintegrate adds a short, memorable particle-based disintegration animation for element removal, using WebGL2 and a DOM snapshot, while remaining framework-agnostic and easy to integrate.

Problem

Standard UI interactions use simple fade or transform animations, which become predictable and unmemorable. Developers need a short, engaging effect for actions like removing a card that feels distinct without being distracting.

Outcome

The disintegration animation provides a short, engaging visual cue for element removal, improving UX while remaining lightweight and framework-agnostic.

Workflow

• 1. Import Disintegrator from 'vanilla-disintegrate/snapdom'.
• 2. Instantiate with a preset (e.g., dust).
• 3. Select the target element (e.g., a card).
• 4. Add a click listener to the remove button that calls effects.remove(card).
• 5. The library captures the element as a canvas, renders particles via WebGL2, and removes the original DOM node after the animation.

Evidence

It animates the removal and restoration of DOM elements using particle effects.

Source

The library first turns the element into an image and then uses that image as the source material for the particles.

Source