Учебник Motion One

Введение
- Что такое Motion One
- История создания и философия библиотеки
- Преимущества перед другими решениями
- Установка и подключение
- Первая анимация
- Структура документации
Основы анимации
- Функция animate
- Синтаксис и базовые параметры
- Анимация одного свойства
- Анимация нескольких свойств
- Селекторы и выбор элементов
- Возвращаемые значения и управление анимацией
- Методы play, pause, stop
- Получение состояния анимации
Свойства и значения
- CSS-свойства доступные для анимации
- Transform-свойства
- Opacity и цвета
- Числовые значения и единицы измерения
- Относительные значения
- Ключевые слова и специальные значения
- Анимация custom properties
Временные параметры
- Длительность анимации
- Задержка перед стартом
- Функции плавности
- Встроенные easing-функции
- Cubic bezier
- Spring анимации
- Настройка физики пружин
- Создание собственных функций плавности
Keyframes
- Концепция ключевых кадров
- Синтаксис объявления keyframes
- Массивы значений
- Объекты со смещениями
- Независимые временные настройки для свойств
- Композиция сложных анимаций
Продвинутые техники анимации
- Последовательные анимации
- Параллельные анимации
- Stagger-эффекты
- Настройка задержек для групп элементов
- Направление распространения
- Анимация по пути
- SVG path анимации
- Offset и выравнивание
Timeline
- Создание временной шкалы
- Управление последовательностью
- Метки времени
- Синхронизация элементов
- Повторное использование timeline
Scroll-driven анимации
- Анимация при прокрутке страницы
- Привязка к viewport
- Scroll triggers
- Параллакс эффекты
- Индикаторы прогресса
- Производительность scroll анимаций
Gesture и интерактивность
- Анимация по событиям мыши
- Drag and drop
- Hover эффекты
- Реакция на клики
- Touch события
- Инерция и физика жестов
Spring анимации
- Физическая модель пружин
- Параметры stiffness и damping
- Mass и velocity
- Подбор значений для разных эффектов
- Прерывание spring анимаций
- Комбинирование с другими типами
Трансформации
- Rotate, scale, translate
- Transform origin
- Perspective и 3D трансформации
- Matrix трансформации
- Порядок применения трансформаций
Анимация SVG
- Специфика работы с SVG
- Анимация атрибутов
- Path morphing
- Stroke animations
- DrawSVG эффекты
- Работа с группами и масками
Производительность
- Compositor-friendly свойства
- Will-change и оптимизация
- Layout thrashing
- Батчинг анимаций
- Отладка производительности
- Throttle и debounce
Хуки жизненного цикла
- onComplete
- onUpdate
- onRepeat
- onStop
- Передача данных в коллбэки
- Очистка ресурсов
Утилиты
- Функция inView
- Отслеживание видимости элементов
- Пороги срабатывания
- Функция scroll
- Управление прокруткой
- Плавная прокрутка к элементу
- Функция stagger
- Создание сложных последовательностей
Анимация текста
- Разбиение на символы
- Разбиение на слова и строки
- Последовательное появление
- Типографские эффекты
- Производительность текстовых анимаций
Responsive анимации
- Адаптация под размеры экрана
- Media queries и анимации
- Отключение анимаций на мобильных
- Prefers-reduced-motion
Композиция и переиспользование
- Создание анимационных пресетов
- Функции-генераторы анимаций
- Композиция сложных эффектов
- Абстракция повторяющихся паттернов
Интеграция с фреймворками
- React компоненты
- Хуки для React
- Vue директивы
- Svelte actions
- SSR и гидратация
Отладка
- Инструменты разработчика
- Визуализация timeline
- Логирование состояний
- Распространенные ошибки
- Конфликты с CSS
Миграция
- Переход с GSAP
- Переход с Anime.js
- Переход с Framer Motion
- Сравнение API
- Mapping функций
Паттерны и практики
- Организация кода анимаций
- Разделение логики и представления
- Тестирование анимаций
- Документирование анимационной системы
- Code style и best practices