Частые ошибки и их решения

Частой ошибкой является попытка инициализировать библиотеку до того, как DOM полностью загрузился. Например:

AOS.init({
  duration: 1200,
});

Если этот код расположен в <head> без события DOMContentLoaded или без defer/async для скрипта, анимации могут не применяться к элементам, которые ещё не существуют на странице. Правильная практика:

document.addEventListener('DOMContentLoaded', () => {
  AOS.init({
    duration: 1200,
    once: true
  });
});

Использование опции once: true предотвращает повторное проигрывание анимаций при скролле назад, что часто требуется в лендингах.

Неправильная работа с динамически добавляемым контентом

AOS не отслеживает элементы, добавленные на страницу после первоначальной инициализации. Частая ошибка — попытка применить анимацию к элементам, созданным через JavaScript после загрузки страницы.

Правильное решение — вызвать метод AOS.refresh() после добавления новых элементов:

const newElement = document.createElement('div');
newElement.classList.add('aos-item');
newElement.setAttribute('data-aos', 'fade-up');
document.body.appendChild(newElement);

// Обновляем AOS
AOS.refresh();

AOS.refresh() пересчитывает позиции элементов и корректно активирует анимации на вновь добавленных блоках.

Конфликты CSS

Некорректное использование CSS может блокировать анимации. Типичные ошибки:

  • overflow: hidden на родительских контейнерах, что обрезает анимацию.
  • Установка opacity: 0 или transform напрямую через CSS без использования AOS, что конфликтует с библиотекой.

Правильная практика — задавать анимации только через атрибут data-aos и управлять стилями через классы aos-init и aos-animate.

.aos-item {
  opacity: 1; /* не ставить 0, если используется AOS */
}

Ошибки с атрибутами data-aos

Некорректное написание атрибутов приводит к игнорированию анимаций. Частые проблемы:

  • Опечатки в названии атрибута: data-aos="fadeup" вместо fade-up.
  • Несовместимые значения для data-aos-easing или data-aos-duration.

Правильный пример:

<div data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in-out">
  Контент
</div>

Следует проверять документацию на поддерживаемые типы анимаций и параметры.

Повторная инициализация

Часто встречается попытка многократного вызова AOS.init(). Это может привести к дублированию классов aos-animate и некорректной работе анимаций.

Оптимально инициализировать библиотеку один раз и использовать методы AOS.refresh() или AOS.refreshHard() для обновления состояния элементов.

AOS.init({ duration: 1200 });
// После изменения DOM
AOS.refresh(); // вместо повторного init

Неправильное использование offset

Атрибут data-aos-offset регулирует, на каком расстоянии от верхнего края окна должна срабатывать анимация. Ошибки:

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

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

<div data-aos="slide-up" data-aos-offset="200">
  Блок с отступом анимации
</div>

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

Некоторые пользователи замечают, что анимации не работают на мобильных браузерах. Частые причины:

  • disable опция установлена некорректно:
AOS.init({
  disable: 'mobile' // отключает анимацию на мобильных
});

Для корректной работы стоит использовать функцию:

AOS.init({
  disable: function() {
    return window.innerWidth < 768; // отключаем только на узких экранах
  }
});
  • Слишком сложные анимации вызывают лаги на слабых устройствах. В этом случае лучше уменьшить duration или использовать более лёгкие эффекты.

Совместимость с другими библиотеками

Иногда AOS конфликтует с библиотеками, изменяющими DOM или добавляющими скролл-события, например с fullpage.js или locomotive-scroll. В таких случаях анимации не срабатывают. Решение:

  • Инициализировать AOS после всех скриптов, влияющих на скролл.
  • Вызывать AOS.refresh() после завершения скролл-инициализации.

Применение классов вручную

Иногда разработчики пытаются вручную добавлять классы aos-init и aos-animate вместо использования AOS. Это приводит к некорректной анимации и конфликтам с атрибутами. Все манипуляции должны проходить через методы AOS и атрибуты data-aos.

Ошибки с комбинацией once и повторной анимацией

Установка once: true отключает повторную анимацию при скролле обратно. Частая ошибка — ожидание повторного воспроизведения элементов, что не происходит. Для повторного проигрывания необходимо once: false.

AOS.init({
  duration: 1200,
  once: false
});

Это важно учитывать при проектировании интерфейсов с интерактивными секциями.

Оглавление