Оживите ваш интерфейс с помощью ScrollTrigger анимаций в GSAP

Создание scroll-driven анимаций с помощью плагина ScrollTrigger из GSAP: scrubbing, pinning и parallax-эффекты, естественно реагирующие на прокрутку страницы.

OpenReplay Team

Jul 26, 2025 · 6 min read

Оживите ваш интерфейс с помощью ScrollTrigger анимаций в GSAP

Анимации, основанные на прокрутке, могут превратить статичный веб-сайт в захватывающий интерактивный опыт. Хотя CSS-анимации полезны для базовых эффектов, создание сложных анимаций, управляемых прокруткой, требует более мощного инструмента. Плагин ScrollTrigger от GSAP — именно такой инструмент, позволяющий создавать отполированные, производительные анимации, запускаемые позицией прокрутки.

В этом руководстве вы узнаете, как реализовать ScrollTrigger анимации, которые естественно реагируют на прокрутку пользователя, с практическими примерами, которые можно использовать в ваших проектах уже сегодня.

Ключевые моменты

ScrollTrigger связывает анимации с позицией прокрутки для интерактивного опыта
Используйте scrub для привязки прогресса анимации непосредственно к позиции прокрутки
Закрепляйте элементы для создания продвинутых эффектов на основе прокрутки
Настраивайте start и end для точного контроля момента запуска анимаций
Используйте markers во время разработки для визуализации точек срабатывания

Что такое ScrollTrigger и зачем его использовать?

ScrollTrigger — это плагин GSAP, который связывает анимации с позицией прокрутки. В отличие от базовых библиотек “on-scroll”, которые просто запускают анимации при входе элементов в область просмотра, ScrollTrigger предлагает точный контроль над:

Когда анимации начинаются и заканчиваются на основе позиции прокрутки
Как анимации развиваются по мере прокрутки пользователем (скрабинг)
Закреплением элементов во время прокрутки мимо них
Созданием сложных взаимодействий на основе прокрутки

Результат? Анимации, которые ощущаются связанными с прокруткой пользователя, а не просто воспроизводятся при срабатывании.

Начало работы с ScrollTrigger

Сначала давайте настроим основы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollTrigger Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .spacer {
            height: 100vh;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    
    <section>
        <div class="box"></div>
    </section>
    
    <div class="spacer"></div>
    
    <!-- GSAP and ScrollTrigger -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    <script>
        // Register the plugin
        gsap.registerPlugin(ScrollTrigger);
        
        // Your animations will go here
    </script>
</body>
</html>

Базовая ScrollTrigger анимация

Начнем с простой анимации, которая запускается при входе элемента в область просмотра:

gsap.to(".box", {
    scrollTrigger: ".box", // Элемент, который запускает анимацию
    x: 300, // Перемещение на 300px вправо
    rotation: 360, // Поворот на 360 градусов
    duration: 1.5, // Длительность анимации
    ease: "power2.out" // Функция плавности
});

Этот код перемещает и поворачивает блок при входе в область просмотра. Но это только верхушка айсберга.

Понимание конфигурации ScrollTrigger

Чтобы раскрыть полный потенциал ScrollTrigger, нужно понимать его параметры конфигурации:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box", // Элемент, который запускает анимацию
        start: "top center", // Начало, когда верх блока достигает центра области просмотра
        end: "bottom center", // Конец, когда низ блока достигает центра области просмотра
        toggleActions: "play pause reverse reset", // Действия при входе, выходе, повторном входе, повторном выходе
        markers: true, // Показывает маркеры для отладки (удалить в продакшене)
    },
    x: 300,
    rotation: 360,
    duration: 2
});

Свойства start и end определяют, когда анимация активируется и деактивируется. Формат: "[позиция триггерного элемента] [позиция области просмотра]".

toggleActions контролирует поведение анимации в четырех ключевых моментах:

При входе в область срабатывания
При выходе из области срабатывания
При повторном входе в область срабатывания при прокрутке вверх
При выходе из области срабатывания при прокрутке вверх

Опции включают: play, pause, resume, reverse, restart, reset, complete и none.

Создание анимаций, управляемых прокруткой, с помощью Scrub

Настоящая магия происходит со свойством scrub, которое привязывает прогресс анимации непосредственно к позиции прокрутки:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true, // Связывает прогресс анимации с позицией прокрутки
        markers: true
    },
    x: 300,
    rotation: 360,
    backgroundColor: "#e74c3c"
});

С scrub: true анимация развивается по мере прокрутки пользователем и даже воспроизводится в обратном направлении при прокрутке назад. Для более плавной анимации используйте числовое значение, например scrub: 0.5, чтобы добавить небольшую задержку.

Закрепление элементов во время прокрутки

Одна из самых мощных функций ScrollTrigger — закрепление элементов на месте во время прокрутки пользователем:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "center center",
        end: "+=300", // Конец через 300px после начальной позиции
        pin: true, // Закрепить блок на месте во время анимации
        scrub: 1,
        markers: true
    },
    x: 300,
    rotation: 360,
    scale: 1.5,
    backgroundColor: "#9b59b6"
});

Это закрепляет блок на месте во время воспроизведения анимации, создавая эффект, похожий на параллакс. end: "+=300" означает, что анимация заканчивается после прокрутки на 300 пикселей от начальной точки.

Создание анимации появления

Давайте создадим практичную анимацию появления для текста или изображений:

<div class="spacer"></div>

<section class="reveal-section">
    <div class="reveal-container">
        <h1 class="reveal-text">Анимации, управляемые прокруткой</h1>
        <p class="reveal-text">Создавайте захватывающий пользовательский опыт с GSAP ScrollTrigger</p>
    </div>
</section>

<div class="spacer"></div>

.reveal-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reveal-container {
    max-width: 800px;
    text-align: center;
    overflow: hidden;
}

.reveal-text {
    opacity: 0;
    transform: translateY(50px);
}

// Анимация появления
gsap.utils.toArray('.reveal-text').forEach(text => {
    gsap.to(text, {
        scrollTrigger: {
            trigger: text,
            start: "top 80%", // Начало, когда верх текста находится на 80% от верха области просмотра
            toggleActions: "play none none none"
        },
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out"
    });
});

Это создает чистый эффект появления для каждого текстового элемента при входе в область просмотра.

Создание эффекта параллакса

Эффекты параллакса добавляют глубину вашему веб-сайту. Вот как создать такой эффект:

<div class="parallax-container">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
        <h1>Эффект параллакса</h1>
    </div>
</div>

.parallax-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Дополнительная высота для движения */
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

.parallax-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}

// Эффект параллакса
gsap.to(".parallax-bg", {
    scrollTrigger: {
        trigger: ".parallax-container",
        start: "top bottom",
        end: "bottom top",
        scrub: true
    },
    y: -100, // Перемещение фона вверх на 100px при прокрутке
    ease: "none"
});

Это создает простой эффект параллакса, где фон движется с другой скоростью, чем передний план.

Секция с горизонтальной прокруткой

Создание секции с горизонтальной прокруткой — еще один впечатляющий эффект:

<div class="spacer"></div>

<section class="horizontal-scroll">
    <div class="horizontal-container">
        <div class="panel">Панель 1</div>
        <div class="panel">Панель 2</div>
        <div class="panel">Панель 3</div>
        <div class="panel">Панель 4</div>
    </div>
</section>

<div class="spacer"></div>

.horizontal-scroll {
    overflow: hidden;
    height: 100vh;
}

.horizontal-container {
    display: flex;
    width: 400%; /* 100% * количество панелей */
    height: 100%;
}

.panel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.panel:nth-child(1) { background-color: #3498db; }
.panel:nth-child(2) { background-color: #2ecc71; }
.panel:nth-child(3) { background-color: #e74c3c; }
.panel:nth-child(4) { background-color: #9b59b6; }

// Горизонтальная прокрутка
gsap.to(".horizontal-container", {
    scrollTrigger: {
        trigger: ".horizontal-scroll",
        start: "top top",
        end: "+=3000", // Расстояние прокрутки
        pin: true,
        scrub: 1,
    },
    x: () => -(document.querySelector(".horizontal-container").offsetWidth - window.innerWidth),
    ease: "none"
});

Это создает секцию, которая прокручивается горизонтально, когда пользователь прокручивает вертикально.

Советы по оптимизации производительности

ScrollTrigger анимации могут влиять на производительность, если не реализованы аккуратно. Вот несколько советов:

Используйте will-change экономно: Применяйте только к элементам, которые действительно анимируются
Избегайте анимации свойств макета: По возможности придерживайтесь transform и opacity
Группируйте похожие анимации: Используйте gsap.utils.toArray() и перебирайте элементы в цикле
Уничтожайте ScrollTrigger при ненадобности: Используйте scrollTrigger.kill() для одностраничных приложений
Сократите использование маркеров: Удаляйте markers: true в продакшене

Устранение распространенных проблем

Анимация начинается слишком рано/поздно

Если ваша анимация срабатывает в неожиданные моменты, проверьте значения start и end. Используйте markers: true для визуализации точек срабатывания.

Рывки в анимации

Для более плавных анимаций используйте scrub: 0.5 или выше вместо scrub: true, чтобы добавить небольшую задержку.

Проблемы совместимости с мобильными устройствами

Мобильные браузеры по-разному обрабатывают события прокрутки. Тщательно тестируйте на мобильных устройствах и рассмотрите использование ScrollTrigger.matchMedia() для создания различных анимаций для разных размеров экрана.

Заключение

С помощью этих техник вы можете создавать анимации прокрутки, которые естественно реагируют на взаимодействие пользователя, улучшая ваш интерфейс без перегрузки пользователей. Начните с простых эффектов и постепенно внедряйте более продвинутые техники по мере освоения возможностей ScrollTrigger.

Часто задаваемые вопросы

Работает ли ScrollTrigger с React/Vue/Angular?

Да, но вам нужно правильно настроить и очистить экземпляры ScrollTrigger при монтировании/размонтировании компонентов.

Можно ли использовать ScrollTrigger с другими библиотеками анимации?

ScrollTrigger разработан для GSAP, но вы можете использовать его callback-функции для запуска других библиотек.

Как сделать ScrollTrigger анимации адаптивными?

Используйте проценты для позиционирования и обновляйте ScrollTrigger при изменении размера окна с помощью ScrollTrigger.refresh().

Бесплатен ли ScrollTrigger для использования?

Базовая функциональность бесплатна, но некоторые продвинутые функции требуют членства в GreenSock Club.

Как отладить ScrollTrigger анимации?

Используйте markers: true для визуализации точек срабатывания и console.log в callback-функциях для отслеживания прогресса.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.

Self-Host Try Cloud Free

Loved by thousands of developers