Vanilla Disintegratev1.6.1
RU

TypeScript-библиотека для анимированного удаления и восстановления DOM-элементов со встроенными GPU-ускоренными эффектами частиц на WebGL2, вдохновлёнными знаменитым «щелчком Таноса». Совместима с нативным JavaScript и любым фреймворком.

npm install vanilla-disintegrate @zumer/snapdom
Соберите эффект в плейграунде
Интерактивный плейграунд

Создайте свой эффект

Выберите пресет, отдельно настройте удаление и восстановление, проверьте оба направления и скопируйте готовый TypeScript-код.

Готовые эффекты
Анимация
Particle laboratory

Shape the motion

DOM elementWebGL2
Подготавливаем снимок…
Меняет ускорение и затухание частиц, но не их траекторию.
Определяет, какая часть элемента начнёт распадаться первой.
Базовое время жизни анимации частиц. Чем больше значение, тем медленнее эффект.
Разница во времени запуска частиц. При нуле все частицы стартуют одновременно.
Смешивает выбранный порядок распада с полностью случайным.
Момент внутри времени жизни частицы, когда начинается затухание.
Доля вылетевших частиц, после которой перестраивается окружающая раскладка.
Документация

Подключите библиотеку к проекту

Начните с установки и готового пресета, затем добавьте сохранение удалённых элементов, фоновую подготовку или собственный рендерер.