Анимации запускаются некорректно

Библиотека AOS (Animate on Scroll) полагается на правильную инициализацию и корректное взаимодействие с DOM для запуска анимаций при прокрутке страницы. Если анимации не работают, важно рассмотреть несколько ключевых факторов.

1. Неправильная инициализация библиотеки

AOS требует вызова метода AOS.init() после полной загрузки DOM. Ошибки могут возникнуть в следующих случаях:

  • Вызов AOS.init() до загрузки элементов страницы, например в <head> без события DOMContentLoaded.
  • Несоответствие селекторов элементов, на которые применяются анимации.

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

document.addEventListener('DOMContentLoaded', function() {
  AOS.init({
    duration: 1200,
    once: true,
    easing: 'ease-in-out'
  });
});

Ключевые параметры и их влияние:

  • duration — длительность анимации в миллисекундах.
  • once — если true, анимация запускается только один раз при прокрутке.
  • easing — тип кривой ускорения анимации.

2. Ошибки в разметке HTML

Элементы должны содержать корректные атрибуты data-aos. Основные ошибки:

  • Отсутствие атрибута data-aos.
  • Опечатки в значениях анимаций (fade-in вместо fade-up).
  • Размещение элементов внутри скрытых контейнеров (например, с display: none), которые не учитываются при инициализации AOS.

Пример корректной разметки:

<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
  Контент с анимацией
</div>

Дополнительные атрибуты:

  • data-aos-delay — задержка перед запуском анимации.
  • data-aos-duration — переопределение глобальной длительности для конкретного элемента.
  • data-aos-offset — смещение точки запуска анимации относительно верхней границы окна.

3. Конфликты с другими библиотеками и стилями

Некорректный запуск анимаций часто связан с конфликтами CSS или JS:

  • CSS: Использование overflow: hidden или transform на родительских контейнерах может блокировать вычисление позиции элемента.
  • JS: Другие скрипты, меняющие DOM после инициализации AOS, требуют повторного вызова AOS.refresh().
// Обновление позиции элементов после динамического добавления контента
AOS.refresh();

4. Динамически добавленный контент

AOS сканирует DOM только при инициализации. Если элементы добавляются динамически (например, через AJAX), анимации на них не сработают без обновления:

// После добавления новых элементов
AOS.refreshHard();

Разница между методами:

  • AOS.refresh() — пересчитывает позиции существующих элементов.
  • AOS.refreshHard() — полностью пересоздаёт список анимируемых элементов, включая новые.

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

Если анимация не запускается, стоит проверить точку срабатывания:

  • Атрибут data-aos-offset задаёт смещение в пикселях. Большое значение может делать анимацию недоступной в видимой области.
  • Стандартное значение — 120.
<div data-aos="fade-right" data-aos-offset="50">
  Контент
</div>

6. Проверка загрузки CSS и JS файлов

AOS требует наличия своих файлов:

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

Ошибки подключения:

  • Несовпадение версий CSS и JS.
  • Задержка загрузки JS из-за внешнего CDN.

Рекомендуется проверять консоль браузера на ошибки типа AOS is not defined или data-aos not recognized.

7. Анимации в адаптивном дизайне

Некорректная работа может проявляться на мобильных устройствах:

  • Некоторые атрибуты могут быть переопределены через медиа-запросы CSS.
  • Элементы с display: none на мобильных устройствах не будут анимироваться, так как библиотека не видит их в DOM.

Использование условной инициализации:

if(window.innerWidth > 768){
  AOS.init();
}

8. Отладка анимаций

Для проверки работы:

  • Включить временное выделение элементов через CSS (border: 1px solid red;) для контроля позиции.
  • Использовать консоль разработчика для проверки классов aos-animate.
  • Убедиться, что событие scroll действительно достигает элемента, активируя анимацию.

Если систематически проверять эти аспекты — инициализацию, разметку, динамические изменения, конфликты CSS/JS и точки срабатывания — большинство проблем с некорректным запуском анимаций AOS устраняется без сложных обходных решений.

Оглавление