Миграция с других библиотек

При переходе с других библиотек анимации при скролле, таких как ScrollMagic, WOW.js или GSAP ScrollTrigger, важно понимать, что AOS ориентирован на декларативный подход: анимации задаются через атрибуты HTML, а не через сложные цепочки вызовов в JavaScript. Это упрощает интеграцию и сокращает количество кода, но требует изменения структуры разметки и подхода к инициализации анимаций.

Основные принципы замены существующих скриптов

  1. Замена CSS-классов и триггеров: В большинстве библиотек для анимаций элементов при скролле используется добавление/удаление классов при появлении элемента в области видимости. В AOS это заменяется на атрибут data-aos, который определяет тип анимации:

    <div class="fade-in" data-aos="fade-up"></div>

    Старые классы вроде .wow или .animate больше не требуются. AOS сам обрабатывает появление элемента в зоне видимости.

  2. Инициализация: В отличие от библиотек, где нужно писать длинные цепочки инициализации, AOS требует одной функции в основном скрипте:

    AOS.init({
  offset: 120,        // смещение до начала анимации
  duration: 600,      // длительность анимации
  easing: 'ease-in-out', 
  once: true,         // анимация срабатывает только один раз
  mirror: false       // повтор анимации при скролле вверх
});

    Для миграции необходимо сопоставить параметры старой библиотеки с параметрами AOS:

    • offset заменяет триггерные точки ScrollMagic;
    • duration соответствует длительности анимации в WOW.js;
    • easing и once позволяют контролировать плавность и повторяемость эффекта.

Замена анимаций

Каждому типу анимации в старой библиотеке есть аналог в AOS:

Старая библиотека Пример Эквивалент в AOS
WOW.js fadeIn .fadeIn data-aos="fade-up"
WOW.js fadeInLeft .fadeInLeft data-aos="fade-left"
GSAP ScrollTrigger gsap.from(el, {opacity:0, y:50}) data-aos="fade-up"
ScrollMagic slideIn custom CSS + JS data-aos="slide-right"

При этом стоит учитывать, что сложные последовательные анимации (например, цепочки элементов с задержкой) обрабатываются через атрибут data-aos-delay:

<div data-aos="fade-up" data-aos-delay="100"></div>
<div data-aos="fade-up" data-aos-delay="200"></div>
<div data-aos="fade-up" data-aos-delay="300"></div>

Для групповых анимаций рекомендуется использовать CSS-селекторы с одинаковым data-aos и разные значения data-aos-delay.

Управление повторением и видимостью

AOS позволяет задавать, должна ли анимация срабатывать один раз или повторяться при каждом скролле:

AOS.init({
  once: false,     // повторяемая анимация
  mirror: true     // анимация повторяется при скролле вверх
});
  • once: true — аналог поведения WOW.js по умолчанию;
  • mirror: true — позволяет имитировать ScrollMagic, когда анимация повторяется при возврате в область видимости.

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

Помимо data-aos и data-aos-delay, есть дополнительные параметры, которые позволяют гибко управлять поведением анимации:

  • data-aos-duration — индивидуальная длительность для элемента.
  • data-aos-easing — тип кривой анимации (ease, linear, ease-in-out).
  • data-aos-offset — смещение для конкретного элемента относительно точки старта анимации.
  • data-aos-anchor-placement — точка привязки анимации (top-bottom, center-center и др.).

Пример сложной конфигурации для отдельного элемента:

<div 
  data-aos="fade-left" 
  data-aos-duration="1000" 
  data-aos-delay="200" 
  data-aos-easing="ease-in-out" 
  data-aos-anchor-placement="top-center">
</div>

Миграция интерактивных элементов

В старых библиотеках часто анимации были связаны с событиями onEnter или onLeave. В AOS это реализуется через события жизненного цикла:

document.addEventListener('aos:in', ({detail}) => {
  console.log('Элемент вошел в зону видимости:', detail);
});

document.addEventListener('aos:out', ({detail}) => {
  console.log('Элемент покинул зону видимости:', detail);
});

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

Пошаговая стратегия миграции

  1. Удаление старых библиотек — полностью убрать WOW.js, ScrollMagic или GSAP ScrollTrigger из проекта.
  2. Замена классов на data-aos — каждому элементу с анимацией назначить соответствующий атрибут.
  3. Инициализация AOS — настроить глобальные параметры (duration, offset, once, mirror).
  4. Проверка цепочек и задержек — использовать data-aos-delay для последовательных анимаций.
  5. Обработка событий — перенести кастомные события с onEnter/onLeave на aos:in/aos:out.
  6. Тестирование на разных устройствах — убедиться, что анимации корректно срабатывают на мобильных и десктопных разрешениях.

Преимущества перехода на AOS

  • Декларативная структура, меньше JS-кода.
  • Простая настройка глобальных и индивидуальных параметров.
  • Совместимость с современными фреймворками и статической генерацией сайтов.
  • Поддержка событий жизненного цикла элементов.
  • Меньше зависимостей и конфликтов с другими скриптами.

Если требуется, можно построить комплексные анимации с несколькими элементами, управляя их задержкой, длительностью и кривыми, полностью заменяя функциональность ScrollMagic или WOW.js без потери производительности.

Оглавление