Условное отключение анимаций

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

1. Использование опции disable

AOS поддерживает встроенную опцию disable, которая позволяет программно отключать анимации на основе определённых условий.

Синтаксис и примеры:

AOS.init({
  disable: function() {
    // Возвращает true — анимации отключаются
    // Возвращает false — анимации остаются активными

    // Отключение на мобильных устройствах
    return window.innerWidth < 768;
  },
  duration: 1000,
  once: true
});
  • window.innerWidth < 768 — типичное условие для мобильных устройств.
  • Функция disable может использовать любые условия, включая проверки браузера, платформы или пользовательских настроек.
  • Можно использовать булевы значения напрямую:
AOS.init({
  disable: true  // полностью отключает анимации
});

2. Отключение анимаций для отдельных элементов

Вместо глобального отключения, иногда нужно отключить анимацию только для конкретных блоков. Это реализуется с помощью атрибута data-aos и CSS-классов:

<div data-aos="fade-up" data-aos-disable="true">
  Контент без анимации
</div>
  • В версии AOS 2.3.1+ атрибут data-aos-disable позволяет локально игнорировать анимацию.
  • Можно динамически добавлять или удалять этот атрибут через Jav * aScript:
const element = document.querySelector('.no-animation');
if (window.innerWidth < 768) {
  element.setAttribute('data-aos-disable', 'true');
} else {
  element.removeAttribute('data-aos-disable');
}

3. Динамическое включение и отключение через пересоздание AOS

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

function refreshAOS() {
  if (window.innerWidth < 768) {
    AOS.init({ disable: true });
  } else {
    AOS.init({ disable: false });
  }
}

// Инициализация при загрузке страницы
refreshAOS();

// Обработка изменения размера окна
window.addEventListener('resize', refreshAOS);
  • Метод AOS.refresh() обновляет позиции и размеры элементов, но не изменяет глобальное условие отключения.
  • Метод AOS.refreshHard() полностью пересоздаёт анимации и учитывает новые настройки disable.

4. Комбинированные условия

Можно создавать сложные условия, учитывающие несколько факторов:

AOS.init({
  disable: function() {
    const isMobile = window.innerWidth < 768;
    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    return isMobile || prefersReducedMotion;
  },
  duration: 800,
  once: true
});
  • prefers-reduced-motion — медиа-запрос для пользователей, которым необходимо минимальное движение интерфейса.
  • Сочетание нескольких условий позволяет сделать анимации максимально адаптивными и не мешать пользовательскому опыту.

5. Отключение анимаций через CSS

Иногда проще управлять отключением через CSS-классы, добавляемые в зависимости от условий:

.no-aos [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}
if (window.innerWidth < 768) {
  document.body.classList.add('no-aos');
} else {
  document.body.classList.remove('no-aos');
}
  • Все элементы с data-aos будут отображаться без анимаций.
  • Этот метод особенно полезен при интеграции с фреймворками, где пересоздание AOS может быть сложным.

6. Практические рекомендации

  • Использовать функцию disable для глобальных условий.
  • Применять data-aos-disable для отдельных элементов.
  • Включать проверку prefers-reduced-motion для соответствия стандартам доступности.
  • Пересоздавать анимации через AOS.refreshHard() при динамических изменениях интерфейса.
  • В мобильных проектах или при слабой производительности браузера лучше полностью отключать анимации.

Эти методы позволяют сделать работу с AOS гибкой, адаптивной и безопасной для производительности, сохраняя контроль над визуальными эффектами на разных устройствах и в разных условиях.

Оглавление