Библиотека анимаций для веб-интерфейсов: пружины, жесты, переходы между состояниями и управление движением. JavaScript и TypeScript, без runtime-зависимостей.
pnpm add @labpics/motionESM, CommonJS и типы TypeScript включены. Для серверного использования нужен
Node.js 22 или новее; для браузерного runtime нужны ES2022 и WeakRef.
Биндинги подключают фреймворк через optional peer dependency.
import { animate } from '@labpics/motion';
const move = animate('.card', { x: 160, opacity: 1 });
const result = await move.finished;Задайте цель. Библиотека выбирает подходящее исполнение и возвращает одинаковые
контролы: pause, play, seek, stop, finish. Новая цель продолжает движение,
а явный массив значений проигрывает авторскую траекторию.
import { scope } from '@labpics/motion';
const ui = scope(document.querySelector('.panel')!);
ui.animate('.item', { opacity: [0, 1], y: [8, 0] }, { duration: 180, stagger: 25 });
ui.on('.replay', 'click', () => ui.animate('.item', { x: [0, -4, 4, 0] }));
// При удалении компонента:
ui.dispose();Область локализует селекторы и освобождает движения, обработчики, значения и дочерние области. Системное уменьшенное движение учитывается автоматически. Остановка старого controller не отменяет движение, которым уже владеет новый.
animate задаёт движение. scope связывает его с компонентом. sequence
объединяет шаги одной временной шкалой. layout показывает переход между
состояниями DOM. value предоставляет реактивное анимируемое число.
Все эти функции доступны из @labpics/motion.
Начало работы · API · Изменения версии · Устройство исполнения.
В репозитории pnpm size проверяет полный достижимый код потребительских сборок.
Размер и производительность зависят от использованных возможностей; методика
измерений описана в руководстве по бенчмаркам.
Участие в проекте. Сообщить об уязвимости.
MIT. Labpics.