Затухание и появление абзацев

Для управления анимацией появления и затухания элементов при скролле используется объект Scene из библиотеки ScrollMagic. Каждая сцена привязывается к конкретному элементу или позиции на странице и задаёт параметры, определяющие, когда и как будет происходить анимация.

Пример базового подключения:

// Инициализация контроллера ScrollMagic
const controller = new ScrollMagic.Controller();

// Создание сцены для абзаца
const scene = new ScrollMagic.Scene({
    triggerElement: "#paragraph1", // Элемент, к которому привязана сцена
    triggerHook: 0.8, // Момент появления (0 - верх окна, 1 - низ окна)
    duration: 200 // Длительность действия сцены
})
.setClassToggle("#paragraph1", "visible") // Добавление класса при активации сцены
.addTo(controller);

Ключевой момент: triggerHook управляет точкой, в которой сцена активируется, а duration задаёт, насколько долго будет действовать эффект затухания или появления.

Анимация появления с помощью CSS

ScrollMagic часто работает в связке с CSS-анимациями для плавного появления текста. Для этого можно использовать классы с переходами (transition) и свойством opacity.

#paragraph1 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#paragraph1.visible {
    opacity: 1;
    transform: translateY(0);
}

Особенности:

  • Эффект translateY создаёт ощущение движения снизу вверх.
  • opacity плавно увеличивается от 0 до 1, создавая затухание.
  • transition определяет скорость и стиль анимации.

Последовательное появление абзацев

Для блоков текста, состоящих из нескольких абзацев, можно создать отдельные сцены для каждого абзаца. Это позволяет добиться эффекта последовательного появления.

const paragraphs = document.querySelectorAll(".fade-paragraph");

paragraphs.forEach((para, index) => {
    new ScrollMagic.Scene({
        triggerElement: para,
        triggerHook: 0.85,
        offset: 50 * index // Смещение для последовательности
    })
    .setClassToggle(para, "visible")
    .addTo(controller);
});

Примечание: использование offset позволяет контролировать задержку между появлением абзацев, создавая эффект каскадного появления.

Затухание при уходе со сцены

ScrollMagic позволяет не только появляться элементам, но и исчезать при скролле вверх. Для этого используется метод .reverse(true) или настройка setClassToggle с CSS-анимацией, включающей обратное затухание.

.fade-paragraph {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fade-paragraph.visible {
    opacity: 1;
}
new ScrollMagic.Scene({
    triggerElement: "#paragraph2",
    triggerHook: 0.9
})
.setClassToggle("#paragraph2", "visible")
.reverse(true) // Позволяет элементу исчезать при скролле вверх
.addTo(controller);

Ключевой момент: reverse(true) обеспечивает обратное снятие класса, что создаёт эффект исчезновения текста.

Использование TweenMax и GSAP для сложных эффектов

Для более сложных анимаций можно подключать GSAP (TweenMax или TweenLite). ScrollMagic позволяет привязывать анимации напрямую к сценам.

const tween = gsap.from("#paragraph3", {opacity: 0, y: 50, duration: 1});

new ScrollMagic.Scene({
    triggerElement: "#paragraph3",
    triggerHook: 0.85,
    reverse: false
})
.setTween(tween)
.addTo(controller);

Преимущества использования GSAP:

  • Точная настройка скорости и кривых анимации.
  • Возможность комбинировать несколько свойств одновременно (opacity, scale, rotate).
  • Поддержка сложных последовательностей с помощью timeline.

Плавное появление с задержкой и цепочкой анимаций

Для текста из нескольких абзацев или строк можно создать цепочку анимаций с помощью GSAP Timeline.

const timeline = gsap.timeline();
timeline.from("#para1", {opacity: 0, y: 20, duration: 0.5})
        .from("#para2", {opacity: 0, y: 20, duration: 0.5}, "-=0.3")
        .from("#para3", {opacity: 0, y: 20, duration: 0.5}, "-=0.3");

new ScrollMagic.Scene({
    triggerElement: "#text-block",
    triggerHook: 0.8
})
.setTween(timeline)
.addTo(controller);

Особенности:

  • "-=0.3" позволяет запускать следующую анимацию раньше окончания предыдущей, создавая эффект плавного наложения.
  • Timeline удобен для длинных текстовых блоков и сложных интерфейсов.

Практические советы

  • Использовать triggerHook в диапазоне 0.7–0.9 для естественного появления текста при скролле.
  • Для небольших текстовых блоков достаточно CSS-анимации с классами, GSAP рекомендуется для сложных эффектов.
  • Разделять абзацы на отдельные сцены при каскадном появлении и использовать offset для тонкой настройки времени.
  • Не перегружать страницу большим количеством сцен одновременно — это может снизить производительность.
  • Для обратного затухания всегда проверять значение reverse и CSS-анимации на плавность.
Оглавление