Учебник GSAP

Введение
- Что такое GSAP и зачем он нужен
- История развития библиотеки
- Сравнение с CSS-анимациями и другими решениями
- Экосистема GSAP: плагины и дополнения
- Установка и подключение
Основы работы с GSAP
- Первая анимация: метод gsap.to()
- Методы gsap.from() и gsap.fromTo()
- Параметры анимации: duration, delay, ease
- Targeting: выбор элементов для анимации
- Специальные свойства: x, y, rotation, scale
- Работа с CSS-свойствами
- Единицы измерения и относительные значения
- Метод gsap.set() для мгновенной установки значений
Easing-функции
- Типы easing: ease, power, back, elastic, bounce
- Параметры easing-функций
- Кастомные easing через CustomEase
- Визуализация и подбор easing
Callbacks и события
- onStart, onUpdate, onComplete
- onRepeat и onReverseComplete
- Передача параметров в callback-функции
- Контекст выполнения (this) в callbacks
Timeline: последовательные анимации
- Создание timeline
- Добавление анимаций: add() и цепочка методов
- Позиционирование: абсолютное и относительное
- Метки (labels) в timeline
- Методы управления: play(), pause(), reverse(), restart()
- Свойство timeScale для изменения скорости
- Вложенные timeline
Управление анимациями
- Методы экземпляра: play, pause, resume, reverse
- Переход к определенному моменту: seek() и progress()
- Уничтожение анимаций: kill() и revert()
- Проверка состояния: isActive(), paused()
- Получение и изменение параметров анимации
Stagger: анимация множества элементов
- Базовый stagger с числовым значением
- Объект stagger: amount, each, from
- Функция stagger для сложных паттернов
- Grid-распределение для двумерных массивов
- Эффекты волны и случайного порядка
Продвинутые техники
- Relative values: использование += и -=
- Random values для случайных значений
- Функции как значения свойств
- Keyframes для сложных последовательностей
- repeatRefresh для динамических повторений
- inherit для наследования значений
ScrollTrigger
- Установка и регистрация плагина
- Базовая настройка: trigger и markers
- Точки старта и конца: start и end
- Режимы scrub: Boolean и Number
- Pin для фиксации элементов
- toggleActions: управление поведением
- Callbacks в ScrollTrigger
- Горизонтальный скролл
- Snap для привязки к позициям
- Batch для групповой обработки элементов
- Работа с containerAnimation
- Методы управления: refresh(), enable(), disable()
- Производительность и оптимизация
ScrollSmoother
- Концепция плавного скролла
- Установка и базовая настройка
- Параметры: smooth и effects
- Data-атрибуты: data-speed и data-lag
- Интеграция с ScrollTrigger
- Ограничения и особенности применения
Draggable
- Регистрация и инициализация
- Типы перетаскивания: x, y, rotation
- Bounds для ограничения области
- InertiaPlugin для инерционного движения
- Snap для привязки к сетке
- ThrowProps для бросков
- События: onDrag, onDragStart, onDragEnd
- Методы управления: enable(), disable(), kill()
MotionPathPlugin
- Анимация по произвольному пути
- SVG paths как траектории движения
- Параметры: align, alignOrigin, autoRotate
- Начальная и конечная позиции на пути
- Создание путей программно
TextPlugin
- Анимация текста посимвольно
- Параметр delimiter для разделения
- Работа с HTML-тегами внутри текста
- Комбинирование с другими свойствами
MorphSVGPlugin
- Морфинг между SVG-формами
- Параметры: shape, shapeIndex, type
- Оптимизация path для качественного морфинга
- Работа со сложными формами
- findShapeIndex для подбора начальной точки
DrawSVGPlugin
- Анимация обводки SVG
- Значения: процент и абсолютные числа
- Направление отрисовки
- Комбинирование с другими SVG-эффектами
SplitText
- Разбиение текста на символы, слова и строки
- Параметр type: chars, words, lines
- Вложенные элементы и классы
- revert() для возврата исходного состояния
- Анимация разбитого текста
Flip
- Концепция FLIP-анимаций
- Методы: getState(), from()
- Параметры: duration, ease, absolute
- Анимация изменений layout
- Работа с группами элементов
- Scale и fade эффекты
- Nested элементы и stagger
- Производительность FLIP-техники
CustomEase и CustomWiggle
- Создание кастомных easing-функций
- Синтаксис SVG path для CustomEase
- Параметры CustomWiggle: wiggles и type
- Экспорт и повторное использование
Работа с SVG
- Особенности анимации SVG-атрибутов
- Трансформации: rotation, scale, transformOrigin
- ViewBox и координатные системы
- Оптимизация SVG для анимаций
- Responsive SVG-анимации
Производительность и оптимизация
- GPU-ускорение: force3D и will-change
- Debounce и throttle для событий
- Lazy-loading анимаций
- Использование getBoundingClientRect()
- Профилирование и отладка производительности
- Работа с большим количеством элементов
- Memory leaks и их предотвращение
Адаптивные анимации
- Media queries и matchMedia
- gsap.matchMedia() для responsive-анимаций
- Изменение параметров на разных разрешениях
- Мобильные устройства: особенности и ограничения
Интеграция с фреймворками
- React: хуки и lifecycle
- Vue: директивы и composition API
- Очистка анимаций при размонтировании
- Ref и реактивность
- TypeScript: типизация GSAP
Утилиты и хелперы
- gsap.utils: методы утилит
- clamp, wrap, interpolate
- mapRange для преобразования диапазонов
- snap для привязки значений
- pipe для композиции функций
- toArray для работы с селекторами
- shuffle для перемешивания массивов
Context API
- Создание контекста: gsap.context()
- Автоматическая очистка анимаций
- Scope для изоляции селекторов
- Использование в компонентах
Отладка и DevTools
- GSDevTools для визуального контроля
- Маркеры ScrollTrigger
- Console методы для диагностики
- Типичные ошибки и их решения
Паттерны и best practices
- Организация кода анимаций
- Переиспользование timeline
- Именование и комментирование
- Разделение логики и анимации
- Тестирование анимаций
Миграция с GSAP 2 на GSAP 3
- Основные изменения в API
- Удаленные методы и их замены
- Новые возможности GSAP 3
- Обратная совместимость