Back

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

OpenReplay Team OpenReplay Team

Jul 26, 2025 · 5 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 контролирует поведение анимации в четырех ключевых моментах:

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

Опции включают: 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 анимации могут влиять на производительность, если не реализованы аккуратно. Вот несколько советов:

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

Используйте 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

More articles from OpenReplay Blog