Ускоренный курс GSAP и ScrollTrigger для Webflow

• GSAP и Scroll Trigger - мощные инструменты для создания расширенных взаимодействий в Webflow.  

• В этом уроке мы воссоздадим эти взаимодействия и расскажем обо всем, что нужно знать.  

• Начнем с добавления библиотек GSAP и Scroll Trigger в проект Webflow.  

• Переходим на вкладку CDN и устанавливаем флажок "Запуск прокрутки".  

• Используем инструмент Code Sandbox для написания кода и обновления без публикации сайта.  

• Создаем новый файл и вызываем скрипт.js.  

• Копируем класс миниатюр и анимируем их с помощью GSAP.  

• Используем GSAP для анимации масштаба и длительности.  

• Применяем различные типы анимации: от начала до конца и набор точек.  

• Создаем пошаговые анимации с помощью GSAP.  

• Используем монтирование для распределения времени начала изображений.  

• Настраиваем порядок появления изображений.  

• Анимируем заголовок с нулевой непрозрачностью и y-преобразованием.  

• Анимируем изображение героя с нулевой непрозрачностью и масштабом.  

• Создаем временную шкалу для анимации.  

• Используем параметр положения для смещения шагов.  

• Применяем относительное и абсолютное положение.  

• Создаем новую временную шкалу для повторения анимации.  

• Используем консоль для управления временной шкалой.  

• Применяем обратные вызовы для запуска анимации после завершения шага.  

• Анимируем заключительный раздел с наложенными изображениями.  

• Создаем новую временную шкалу scroll tl и добавляем шаг для анимации изображений.  

• Устанавливаем триггер прокрутки для раздела "О нас".  

• Настраиваем триггерные точки: верхняя часть раздела достигает центра экрана и нижняя часть достигает нижней части экрана.  

• Добавляем маркеры true для визуального обзора точек.  

• Включаем scrub true для очистки временной шкалы при прокрутке.  

• Обновляем страницу и проверяем работу маркеров.  

• Настраиваем триггерные точки с использованием процентных значений.  

• Изменяем начальную и конечную точки для более точного управления.  

• Добавляем scrub action для плавного перехода при остановке прокрутки.  

• Добавляем переключающие действия для анимации при прокрутке.  

• Настраиваем действия для четырех ключевых моментов: появление, исчезновение, повторное появление и исчезновение.  

• Проверяем работу анимации при различных состояниях прокрутки.  

• Настраиваем запуск анимации при достижении нижней части экрана.  

• Заканчиваем анимацию при достижении 70% от верхней части экрана.  

• Проверяем работу анимации при различных положениях прокрутки.  

• Используем jquery для обработки нескольких копий раздела.  

• Переносим код временной шкалы в цикл для каждого раздела.  

• Настраиваем триггерные элементы для каждого раздела, чтобы анимировать только нужные изображения.  

• Каждый раздел обрабатывается как отдельный триггер.  

• Изображения анимируются только при появлении соответствующего раздела.  

• Для получения дополнительной информации о scroll trigger и других библиотеках gsap, ознакомьтесь с Patreon автора.