Особенности работы с виртуальным DOM

Для начала работы с библиотекой AOS (Animate on Scroll) необходимо подключить CSS и JS файлы. Это можно сделать через CDN:

После подключения требуется инициализировать библиотеку в Jav * aScript:

AOS.init({
  offset: 120,        // смещение от точки срабатывания анимации
  duration: 400,      // продолжительность анимации в мс
  easing: 'ease',     // функция плавности анимации
  once: true,         // запуск анимации один раз
  mirror: false       // повтор анимации при скролле вверх
});

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

Использование AOS в элементах

Любой HTML-элемент можно анимировать, добавив атрибут data-aos:

Контент с анимацией появления снизу


Контент с увеличением

Ключевые атрибуты:

  • data-aos — тип анимации (fade-up, fade-down, fade-left, fade-right, zoom-in, flip-left и др.).
  • data-aos-duration — индивидуальная длительность анимации для элемента (переопределяет глобальный duration).
  • data-aos-delay — задержка перед запуском анимации (в миллисекундах).
  • data-aos-offset — смещение срабатывания относительно видимой области.
  • data-aos-easing — функция плавности анимации конкретного элемента.
  • data-aos-once — если указано true, анимация будет срабатывать только один раз.

Интеграция с виртуальным DOM

При работе с современными фреймворками, такими как React, Vue или Svelte, возникает проблема: элементы создаются динамически, и их может не существовать в момент первоначальной инициализации AOS. Чтобы анимации корректно применялись к новым элементам, нужно вызывать метод refresh() после каждого обновления виртуального DOM:

AOS.refresh();

В React это можно сделать внутри useEffect:

import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function App() {
  useEffect(() => {
    AOS.init({ once: true });
  }, []);

  useEffect(() => {
    AOS.refresh(); // обновление после рендеринга динамических элементов
  });

  return (
    

      {items.map(item => (
        
{item.text}

      ))}
    

  );
}

Особенности работы с виртуальным DOM:

  • При добавлении или удалении элементов AOS не отслеживает их автоматически, требуется вызов refresh() или refreshHard().
  • Метод refresh() пересчитывает позиции и атрибуты всех элементов с data-aos.
  • Метод refreshHard() полностью пересоздаёт все элементы, включая повторную инициализацию анимаций.

Настройка триггеров для динамического контента

Для элементов, загружаемых асинхронно (например, через AJAX или ленивую загрузку компонентов), важно вызывать AOS.refresh() после их вставки в DOM:

fetch('/api/items')
  .then(res => res.json())
  .then(data => {
    renderItems(data);   // функция, которая добавляет элементы в DOM
    AOS.refresh();       // пересчёт позиций для новых элементов
  });

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

Работа с кастомными компонентами

Если анимации применяются к кастомным компонентам, важно помнить:

  1. Атрибут data-aos должен быть на корневом HTML-элементе компонента.
  2. В React или Vue можно передавать атрибут как пропс и динамически добавлять его через ...props.
  3. Любые динамические изменения атрибутов требуют повторного вызова AOS.refresh().

Пример передачи атрибутов в React:

function AnimatedCard({ text, animation = 'fade-up' }) {
  return (
    

      {text}
    

  );
}

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

При работе с большим количеством анимированных элементов:

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

Доступные эффекты и их особенности

Популярные эффекты AOS:

  • fade — плавное появление.
  • fade-up, fade-down, fade-left, fade-right — появление с смещением в указанном направлении.
  • flip-left, flip-right, flip-up, flip-down — переворот по оси.
  • zoom-in, zoom-out — увеличение или уменьшение.
  • slide-up, slide-down, slide-left, slide-right — слайд с появлением.

Каждый эффект можно комбинировать с задержкой и длительностью для создания сложных последовательностей анимаций при скролле.

Оглавление