Настройка breakpoint для disable

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

Параметр `disable`

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

Булевое значение
```
AOS.init({
  disable: true, // полностью отключает анимацию
});
```
- true – анимации отключены на всех устройствах.
- false – анимации включены на всех устройствах.
Функция
```
AOS.init({
  disable: function() {
    return window.innerWidth < 768; // отключение для узких экранов
  }
});
```
Использование функции позволяет вычислять условие динамически, например, в зависимости от размера окна или типа устройства.
Строка 'phone' | 'tablet' | 'mobile'
```
AOS.init({
  disable: 'mobile' // отключение на мобильных устройствах
});
```
Предустановленные значения упрощают отключение для типичных устройств:
- 'phone' – смартфоны
- 'tablet' – планшеты
- 'mobile' – любые мобильные устройства

Использование breakpoint для disable

Для более точного управления анимациями рекомендуется применять breakpoint по ширине экрана. Основная логика заключается в проверке window.innerWidth и возврате true или false для параметра disable.

Пример: отключение анимации на устройствах с шириной экрана меньше 1024px:

AOS.init({
  disable: function() {
    return window.innerWidth < 1024;
  }
});

Если ширина окна меньше 1024px, анимации не будут активны.
Если ширина окна больше или равна 1024px, анимации включены.

Множественные breakpoints

Для сложных проектов можно создавать несколько условий для разных диапазонов экранов. Например:

AOS.init({
  disable: function() {
    const width = window.innerWidth;
    if (width < 768) return true;   // смартфоны
    if (width >= 768 && width < 1024) return false; // планшеты – анимации включены
    if (width >= 1024) return false; // десктоп – анимации включены
  }
});

Такая конфигурация позволяет тонко настраивать анимации в зависимости от конкретного устройства или ширины экрана.

Динамическое обновление при ресайзе

AOS не обновляет автоматически состояние disable при изменении размера окна после инициализации. Для корректной работы с изменением ширины экрана необходимо:

Инициализировать AOS с функцией disable.
Вызывать AOS.refresh() при событии resize.

AOS.init({
  disable: function() {
    return window.innerWidth < 1024;
  }
});

window.addEventListener('resize', function() {
  AOS.refresh();
});

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

Интеграция с CSS media queries

Иногда удобно сочетать настройку disable с CSS media queries для более оптимальной загрузки и производительности:

@media (max-width: 1023px) {
  .aos-item {
    transition: none !important;
  }
}

Такой подход предотвращает попытки анимации на устройствах, где они отключены, и снижает нагрузку на браузер.
В сочетании с disable это обеспечивает максимально плавное и предсказуемое поведение интерфейса.