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

1. Неправильная инициализация библиотеки Для корректной работы AOS необходимо вызвать AOS.init() после загрузки всех элементов страницы. Если вызов происходит до того, как DOM полностью сформирован, анимации могут не срабатывать. Часто встречается ситуация, когда скрипт подключён в <head> без атрибута defer или без обёртки в DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
    AOS.init();
});

Использование defer в подключении скрипта также решает проблему:

<script src="aos.js" defer></script>
<script>
    AOS.init();
</script>

2. Отсутствие атрибутов data-aos на элементах AOS работает только с элементами, на которых задан атрибут data-aos. Без него библиотека не знает, какой эффект применить. Пример правильного использования:

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

Если атрибут указан, но анимация не запускается, важно проверить правильность названия эффекта. Любая ошибка в имени приведёт к игнорированию анимации.

3. CSS классы и стили AOS AOS использует собственные CSS-классы для запуска анимаций. Для работы необходимо подключить соответствующий файл стилей aos.css. Без него элементы будут оставаться статичными, даже если JS инициализирован:

<link href="aos.css" rel="stylesheet">

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

4. Конфликты с другими библиотеками или CSS Некоторые CSS-правила могут перекрывать анимации AOS. Особенно это касается свойств overflow, position и transform. Элементы с overflow: hidden или position: fixed иногда не запускают анимацию корректно.

JS-библиотеки для прокрутки (например, custom scroll) могут блокировать события скролла, что делает невозможным срабатывание анимации.

5. Элементы динамически добавляются на страницу Если элементы с data-aos добавляются после инициализации AOS, библиотека их не обработает автоматически. В таких случаях необходимо вызывать метод AOS.refresh() после добавления новых элементов:

// Добавление контента динамически
let newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-up');
document.body.appendChild(newElement);

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

6. Высота и видимость элемента Анимация срабатывает только тогда, когда элемент появляется в зоне видимости (viewport). Если контейнер имеет height: 0 или скрыт через display: none, анимация не запускается. Необходимо проверять CSS и убедиться, что элемент реально видим при скролле.

7. Настройки AOS, влияющие на запуск анимаций При инициализации AOS можно передать конфигурацию. Некоторые параметры могут препятствовать срабатыванию анимаций:

AOS.init({
    offset: 120, // отступ от верхней границы окна для запуска анимации
    duration: 600, // длительность анимации
    once: true, // запуск только один раз
});

Если offset слишком велик, элемент может никогда не попасть в зону активации. Параметр disable может быть установлен на определённых устройствах, что полностью отключает анимации.

8. Проверка ошибок в консоли браузера Часто причина кроется в ошибках JavaScript. Например, отсутствие самой библиотеки (Uncaught ReferenceError: AOS is not defined) или конфликт с другими скриптами. Перед поиском сложных проблем всегда нужно открыть DevTools и убедиться, что нет критических ошибок.

9. Использование старых версий библиотеки Некоторые старые версии AOS имеют баги, которые могут мешать запуску анимаций. Рекомендуется использовать актуальную версию и проверять документацию на предмет изменений в API или новых требований к инициализации.

10. Особенности анимаций на мобильных устройствах По умолчанию AOS может отключать анимации на мобильных устройствах. Это регулируется через параметр disable:

AOS.init({
    disable: 'mobile'
});

Если требуется запускать анимации на всех устройствах, нужно либо убрать disable, либо использовать функцию:

AOS.init({
    disable: function() {
        return false; // всегда включено
    }
});

Следуя этим рекомендациям, можно систематически выявлять и устранять причины, по которым анимации AOS не запускаются, обеспечивая корректное отображение эффектов на всех страницах.

Оглавление