Привет, друзья! Хочу поделиться с вами примерами использования GSAP. 
Репозиторий Что такое GSAP? Если в двух словах, то GSAP (The GreenSock Animation Platform) — это набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript. Использование Установка Импорт Пример Методы gsap.to и gsap.from принимают 2 параметра: Метод gsap.fromTo принимает 3 параметра: targets, startVars, endVars. Как организован проект? Проект включает в себя 16 примеров, упакованных в одно приложение. Примеры условно можно можно разделить на простые и продвинутые. Переключение между примерами осуществляется с помощью селектора, реализованного с помощью хука useSelector из Downshift. По каждому примеру имеется краткое описание (см. ниже). Для того, чтобы эффект от прочтения статьи был максимальным рекомендую следующий алгоритм: Я старался комментировать ключевые моменты в коде компонентов, но вполне мог что-то упустить, поэтому приветствуется любая форма обратной связи. Итак, поехали. gsap требуется доступ к анимируемому DOM-элементу. Для предоставления такого доступа используется хук useRef. Разумеется, в момент анимирования элемент должен быть отрендерен, поэтому gsap должен запускаться в хуке useEffect: См. компонент AnimatingTargetElement. Для применения анимации к дочерним элементам (компонентам) используется вспомогательная функция utils.selector(el), где el — предок анимируемых элементов: См. компонент AnimatingAllDescendantElements. Для применения анимации к некоторым дочерним элементам используется техника под названием перенаправление или передача ссылки (Ref Forwarding): См. компонент AnimatingSomeDescendantElements. Хук useRef может использоваться не только для получения доступа к DOM-элементу, но и для сохранения состояния между рендерингами компонента, такого как состояние анимации: См. компонент ControllingAnimationTimeline. По умолчанию хук useEffect запускается после первого и каждого последующего рендеринга. Вызов useEffect означает запуск анимации. Для управления запуском useEffect (и анимации) используется массив зависимостей, когда отсутствие массива означает запуск после первого и каждого последующего рендеринга, пустой массив — запуск только после первого рендеринга, массив с зависимостями — запуск после первого рендеринга и при каждом изменении (любой) зависимости: См. компонент ControllingAnimationStart. Пример запуска анимации в ответ на изменение пропа, передаваемого дочернему компоненту: См. компонент AnimationStartPropChange. Пример запуска анимации в ответ на действие пользователя (наведение курсора на элемент): См. компонент AnimationStartUserAction. Во избежание вспышек (мигания или мерцания) вместо хука useEffect следует использовать хук useLayoutEffect. Как вы знаете, последний запускается синхронно, т.е. перед отрисовкой DOM: См. компонент AnimationWithoutFlash. Не забывайте об отключении анимации и удалении обработчиков событий при размонтировании компонента, особенно, если речь идет о длительной анимации, использовании плагинов вроде ScrollTrigger или изменении состояния компонента: Порой требуется распределить жизненный цикл анимации (timeline) между несколькими компонентами. Также иногда анимация зависит от элементов, находящихся в разных компонентах. Для решения подобных задач существует 2 подхода: См. компонент PassingTimelineThroughProps. См. компонент PassingCallbackThroughProps. Передавать timeline или колбек для добавления анимации в timeline не всегда удобно. Что если нам нужно передать timeline компоненту, глубоко вложенному в другие компоненты? В этом случае не обойтись без контекста. См. компонент PassingTimelineThroughContext. Передача пропов или использование контекста в большинстве случаев работает хорошо, но эти механизмы приводят к повторной отрисовке компонентов, что может оказать негативное влияние на производительность при постоянном изменении значения, например, при отслеживании позиции курсора. Для пропуска рендеринга мы можем использовать хук useImperativeHandle и создать API для компонента. Любое значение, возвращаемое хуком, будет передаваться компоненту в виде ссылки: См. компонент ImperativeHandleMousePosition. Создание переиспользуемых анимаций — отличный способ сохранения чистоты кода и уменьшения его количества. Простейшим способом это сделать является вызов функции для создания анимации: Более декларативный подход предполагает создание компонента-обертки для обработки анимации: См. компонент ReusableAnimationWrapper. Рекомендуемым способом создания переиспользуемых анимаций является метод registerEffect(): См. компонент ReusableAnimationRegisterEffect. Как анимировать удаление элемента из DOM? Одним из способов это сделать является изменение состояния компонента после завершения анимации: См. компонент RemovingSingleElementFromDom. Точно такой же подход применим в отношении нескольких элементов: См. компонент RemovingMultipleElementsFromDom. Кастомные хуки позволяют извлекать логику анимации в переиспользуемые функции. Вот как можно реализовать пример с registerEffect с помощью кастомного хука: Хук для выборки дочерних компонентов. Сигнатура Использование Хук для добавления ссылок в массив. Сигнатура Использование Данный хук решает проблему доступа к значениям состояния в колбеках. Он похож на useState, но возвращает третье значение — ссылку на текущее состояние. Сигнатура Использование Пожалуй, это все, чем я хотел поделиться с вами в данной статье. Что касается моего личного мнения о GSAP, то, пожалуй, это один из наиболее простых и вместе с тем продвинутых инструментов в своей категории. Теперь это мой первый (после CSS и SASS) кандидат на реализацию анимации в веб-приложениях. Благодарю за внимание и хорошего дня!  JavaScript Developer