Решение типовых проблем при установке

После добавления библиотеки AOS на страницу важно убедиться, что подключение прошло корректно. Библиотека может быть подключена двумя способами: через CDN или через пакетный менеджер (npm/yarn). Основные шаги проверки:

  1. Подключение CSS и JS В должен быть подключён файл стилей AOS:

    Перед закрывающимся тегом подключается скрипт:

    После этого необходимо инициализировать AOS:

    AOS.init();

    Если используется сборщик, подключение через npm выглядит так:

    import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();

  2. Проверка консоли браузера Если скрипт не найден, в консоли появится ошибка Uncaught ReferenceError: AOS is not defined. В этом случае нужно убедиться, что путь к скрипту указан корректно и что файл действительно доступен.

Частые проблемы с инициализацией

1. Элементы не анимируются Причины:

  • Отсутствует атрибут data-aos у элемента. Пример корректного использования:

    Текст для анимации

  • Инициализация AOS вызвана до загрузки DOM. Решение — вызывать AOS.init() внутри обработчика DOMContentLoaded:

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

  • Конфликт с другими библиотеками анимации или стилями overflow: hidden, которые скрывают содержимое.

2. Анимации срабатывают только один раз По умолчанию анимации повторяются только при первом попадании элемента в область видимости. Чтобы включить повторное срабатывание:

AOS.init({
    once: false
});

3. Медленная или некорректная анимация Настройки скорости и задержки регулируются через data-aos-duration и data-aos-delay:

Текст
  • data-aos-duration — время анимации в миллисекундах.
  • data-aos-delay — задержка перед началом анимации в миллисекундах.

Решение проблем с адаптивностью

  • Элементы могут не анимироваться на мобильных устройствах из-за ограничений по ресурсам. Чтобы разрешить анимацию на всех устройствах, устанавливают параметр disable в false или функцию:
AOS.init({
    disable: false
});
  • Если необходимо отключить анимацию на мобильных устройствах для производительности:
AOS.init({
    disable: 'mobile'
});
  • В случае проблем с высотой контейнеров на мобильных экранах можно добавить data-aos-anchor-placement="top-bottom" для более точного определения момента срабатывания анимации.

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

  • AOS добавляет классы aos-animate и aos-init для управления анимацией. Стили, переопределяющие opacity, transform или transition на этих элементах, могут ломать эффект.
  • При использовании CSS-фреймворков (Bootstrap, Tailwind) необходимо проверять, что классы не перекрывают свойства анимации.
  • Если на странице есть другие скрипты, изменяющие DOM после инициализации AOS, нужно вызывать AOS.refresh() после изменения:
// Добавление элементов динамически
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-right');
document.body.appendChild(newElement);

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

Работа с динамическим контентом

Для контента, загружаемого через AJAX или рендеримого на клиенте (React, Vue, Angular):

  1. Каждый новый элемент должен иметь атрибут data-aos.

  2. После добавления DOM необходимо вызвать AOS.refresh() или AOS.refreshHard() для полного пересчёта позиций элементов.

    fetch('/api/data')
    .then(res => res.json())
    .then(data => {
        data.forEach(item => {
            const div = document.createElement('div');
            div.setAttribute('data-aos', 'zoom-in');
            div.textContent = item.text;
            document.body.appendChild(div);
        });
        AOS.refresh();
    });

Настройка глобальных параметров

AOS.init() принимает объект с множеством опций:

  • offset — смещение для триггера анимации (по умолчанию 120px).
  • duration — стандартная длительность всех анимаций.
  • delay — глобальная задержка анимаций.
  • easing — функция плавности (например, ease, ease-in-out).
  • once — повторять анимацию или нет.
  • mirror — анимация повторяется при прокрутке вверх.

Пример:

AOS.init({
    offset: 200,
    duration: 800,
    easing: 'ease-in-out',
    once: true,
    mirror: false
});

Эта конфигурация позволяет централизованно контролировать поведение всех анимаций и предотвращает большинство проблем с некорректной работой AOS.

Оглавление