Параметр startEvent

Параметр startEvent отвечает за определение события, при котором библиотека AOS инициализируется и начинает отслеживание элементов для анимации. По умолчанию значение этого параметра установлено в 'DOMContentLoaded', что означает запуск скрипта сразу после полной загрузки структуры HTML-документа.

AOS.init({
  startEvent: 'DOMContentLoaded'
});

Возможные значения startEvent

startEvent может принимать любые валидные события браузера, которые поддерживают обработку через addEventListener. Наиболее часто применяются следующие варианты:

  1. DOMContentLoaded Запуск после загрузки DOM, но до полной загрузки изображений и стилей. Оптимальный вариант для большинства случаев, когда анимации должны быть готовы сразу после появления элементов на странице.

  2. load Инициализация происходит после полной загрузки страницы, включая все изображения, стили, шрифты и внешние ресурсы. Подходит для страниц с тяжелыми медиа-файлами, чтобы анимации не срабатывали до того, как элементы будут полностью готовы.

  3. Произвольные события Возможна привязка к кастомным событиям, например, к собственным событиям библиотеки или пользовательским триггерам:

    document.addEventListener('customReady', function() {
  AOS.init({ startEvent: 'customReady' });
});

Практические сценарии использования

  1. SPA (Single Page Application) В одностраничных приложениях часто требуется запуск анимаций после динамической подгрузки контента. В этом случае startEvent можно настроить на событие, сигнализирующее о завершении рендеринга нужного блока:

    AOS.init({
  startEvent: 'contentLoaded'
});

  2. Оптимизация производительности Если страница содержит большое количество изображений и тяжелых блоков, и анимации должны запускаться только после полной загрузки страницы, лучше использовать:

    AOS.init({
  startEvent: 'load'
});

  3. Модальные окна и динамический контент Для элементов, которые появляются после действий пользователя (например, открытие модального окна), можно вручную инициализировать AOS через вызов AOS.refresh() после открытия окна, одновременно используя кастомное событие для запуска:

    const modal = document.querySelector('.modal');
modal.addEventListener('show', () => {
  AOS.init({ startEvent: 'show' });
  AOS.refresh();
});

Взаимодействие с другими параметрами

Параметр startEvent тесно связан с другими ключевыми настройками:

  • disable – отключение анимаций на определенных устройствах или браузерах может потребовать задержки инициализации до события load.
  • once – когда анимация должна срабатывать один раз, важно корректно выбирать событие, чтобы элементы были уже полностью видимыми.
  • offset и duration – изменение точки запуска и длительности анимации может быть особенно заметным при выборе события startEvent: 'load', когда весь контент уже загружен и позиционирование элементов окончательно определено.

Важные рекомендации

  • Для большинства страниц достаточно стандартного значения 'DOMContentLoaded'.
  • При динамическом контенте или SPA стоит создавать собственное событие, которое сигнализирует о готовности блока для анимации.
  • Использование события 'load' оправдано на тяжелых страницах, но может создавать задержку в отображении анимаций.
  • Не рекомендуется инициализировать AOS несколько раз без необходимости, так как это может вызвать повторные перерасчеты положения элементов и снижение производительности.

Пример комплексной конфигурации с startEvent

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

В этом примере анимации начнутся только после полной загрузки страницы, будут длиться 800 мс с плавной кривой ease-in-out, срабатывая только один раз для каждого элемента, и с отступом начала анимации в 200 пикселей от нижней границы окна.

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

Оглавление