Совместимость с GSAP

AOS (Animate on Scroll) обеспечивает удобное включение анимаций при прокрутке страницы, но его возможности ограничены набором встроенных эффектов и простыми триггерами. Для создания более гибких и сложных анимаций используется GSAP (GreenSock Animation Platform). Совмещение AOS и GSAP позволяет синхронизировать скролл-триггеры с мощными таймлайнами, кастомными easing-функциями и контролем последовательности анимаций.

Основные принципы совместимости

  1. Разделение ролей:

    • AOS отвечает за отслеживание видимости элементов при скролле.
    • GSAP управляет конкретной анимацией: перемещением, вращением, масштабированием, прозрачностью и сложными последовательностями.

  2. Использование data-aos как триггера: Можно оставить стандартные атрибуты data-aos на элементах, чтобы AOS генерировал событие появления элемента в области видимости, а затем запускать GSAP-анимацию через события AOS:

    AOS.init({
  once: true, // анимация срабатывает только один раз
  mirror: false
});

document.querySelectorAll('[data-aos]').forEach(el => {
  el.addEventListener('aos:in', ({ detail }) => {
    gsap.fromTo(el, 
      { opacity: 0, y: 50 }, 
      { opacity: 1, y: 0, duration: 1, ease: "power3.out" }
    );
  });
});

    Здесь событие aos:in используется как точка запуска для GSAP, что позволяет точно синхронизировать анимацию с появлением элемента на экране.

Продвинутая настройка таймлайнов

GSAP позволяет объединять несколько анимаций в Timeline, а AOS выступает инициатором:

const tl = gsap.timeline({ paused: true });
tl.to('.box1', { x: 100, duration: 0.5 })
  .to('.box2', { scale: 1.5, duration: 0.7 }, "-=0.3")
  .to('.box3', { rotation: 360, duration: 1 });

document.querySelector('.trigger').addEventListener('aos:in', () => {
  tl.play();
});

Преимущества такого подхода:

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

Синхронизация прокрутки с ScrollTrigger

GSAP предлагает собственный плагин ScrollTrigger, который позволяет синхронизировать анимации с положением скролла. AOS можно использовать для легких эффектов или быстрого прототипирования, а ScrollTrigger — для более детальной анимации:

gsap.registerPlugin(ScrollTrigger);

gsap.to('.section', {
  y: -100,
  opacity: 0,
  scrollTrigger: {
    trigger: '.section',
    start: 'top 80%',
    end: 'bottom 20%',
    scrub: true,
  }
});

Использование AOS и ScrollTrigger одновременно требует внимательного управления триггерами, чтобы эффекты не дублировались. Часто комбинируют AOS только для инициализации элемента, а все сложные скролл-анимации полностью передаются в GSAP.

Обработка повторного появления элементов

AOS поддерживает параметр once: false, позволяющий анимации срабатывать каждый раз, когда элемент появляется на экране. GSAP-анимации можно привязать к этим событиям:

AOS.init({ once: false });

document.querySelectorAll('[data-aos]').forEach(el => {
  el.addEventListener('aos:in', () => {
    gsap.fromTo(el, { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6 });
  });

  el.addEventListener('aos:out', () => {
    gsap.to(el, { y: -50, opacity: 0, duration: 0.6 });
  });
});

Такой подход позволяет создавать интерактивные скролл-анимации, которые реагируют на возврат пользователя к элементу, обеспечивая динамическое поведение страницы.

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

  • Избегать тяжелых GSAP-анимаций на всех элементах одновременно, когда AOS отслеживает большое количество объектов.
  • Использовать once: true для элементов, которые не требуют повторного воспроизведения, чтобы снизить нагрузку.
  • Композировать легкие эффекты AOS + ключевые анимации GSAP вместо переноса всех анимаций на один слой.

Совместное использование AOS и GSAP позволяет достичь гибкости и выразительности, объединяя простоту триггеров AOS с мощью и контролем таймлайнов GSAP, что критично для современных интерактивных веб-интерфейсов.

Оглавление