Vanilla Disintegrate — Modern and Impressive Animations for the Web

Описание и применение

Vanilla Disintegrate позволяет добавить короткое, запоминающееся анимационное разрушающее действие при удалении элементов, используя частицы и WebGL2, сохраняя при этом простоту использования и независимость от фреймворков.

Задача

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.

Результат

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

Рабочий процесс

• 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.

Доказательства

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

Источник

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

Источник