Создание собственных функций плавности

Для использования библиотеки AOS достаточно подключить её CSS и JS файлы на страницу. После подключения необходимо вызвать функцию инициализации:

AOS.init({
  offset: 120, // Смещение в пикселях относительно нижней границы окна
  delay: 0,     // Задержка перед запуском анимации
  duration: 400, // Длительность анимации
  easing: 'ease', // Функция ускорения
  once: false,   // Анимация выполняется только один раз
  mirror: false, // Анимация повторяется при прокрутке вверх
});

Ключевые параметры:

  • offset – определяет момент срабатывания анимации относительно видимой области экрана.
  • delay – задаёт задержку начала анимации, полезно для последовательного эффекта.
  • duration – продолжительность анимации, чем больше значение, тем медленнее эффект.
  • easing – стандартная CSS-функция ускорения (linear, ease-in, ease-out, ease-in-out).
  • once – если true, анимация запускается только при первом появлении элемента.
  • mirror – позволяет анимации повторяться при обратной прокрутке.

Настройка кастомных анимаций

AOS предоставляет возможность создавать свои собственные эффекты через CSS. Стандартные эффекты (fade, slide, zoom) можно расширять или полностью заменять.

Пример пользовательской анимации:

.my-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition-property: opacity, transform;
}

.my-fade-up.aos-animate {
  opacity: 1;
  transform: translateY(0);
}

Здесь ключевой момент — использовать класс aos-animate, который добавляет библиотека при срабатывании эффекта. Любая анимация должна учитывать это.

Создание собственных функций плавности через JavaScript

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

  • aos:in — элемент появляется в зоне видимости.
  • aos:out — элемент покидает область видимости.

Пример реализации плавного смещения с пользовательской функцией:

document.querySelectorAll('.custom-move').forEach(el => {
  el.addEventListener('aos:in', () => {
    let start = null;
    const duration = 800;
    const initialY = 50;
    const targetY = 0;

    function animate(timestamp) {
      if (!start) start = timestamp;
      const progress = Math.min((timestamp - start) / duration, 1);
      const ease = progress * (2 - progress); // easeOutQuad
      el.style.transform = `translateY(${initialY - (initialY - targetY) * ease}px)`;
      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    }

    requestAnimationFrame(animate);
  });
});

Пояснения:

  • requestAnimationFrame обеспечивает плавное обновление позиции элемента.
  • Функция easeOutQuad используется для смягчения движения, создавая эффект замедления к концу анимации.
  • Можно создавать любые кастомные кривые ускорения, используя математические формулы.

Использование кастомных кривых ускорения (easing)

В AOS можно применять собственные функции easing для более гибкого контроля анимации. Пример:

function easeInOutCubic(t) {
  return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2;
}

document.querySelectorAll('.custom-ease').forEach(el => {
  el.addEventListener('aos:in', () => {
    let start = null;
    const duration = 1000;

    function animate(timestamp) {
      if (!start) start = timestamp;
      const progress = Math.min((timestamp - start) / duration, 1);
      const eased = easeInOutCubic(progress);
      el.style.transform = `translateY(${50 - 50*eased}px)`;
      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    }

    requestAnimationFrame(animate);
  });
});

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

Сочетание нескольких анимаций и триггеров

Можно комбинировать несколько анимаций на одном элементе, используя кастомные события:

const elements = document.querySelectorAll('.combo-animation');
elements.forEach(el => {
  el.addEventListener('aos:in', () => {
    el.classList.add('slide-in');
    setTimeout(() => el.classList.add('fade-in'), 400);
  });
});

В этом примере элемент сначала сдвигается (slide-in), а затем постепенно появляется (fade-in). Тайминги синхронизируются через setTimeout.

Динамическое обновление анимаций

AOS поддерживает пересчёт позиции элементов через метод refresh(). Это важно, если DOM изменяется динамически:

AOS.refresh(); // пересчитывает все элементы и их offset

Можно вызывать после добавления новых блоков на страницу или изменения размеров контейнеров, чтобы анимации запускались корректно.

Интеграция с библиотеками и фреймворками

AOS совместим с React, Vue и другими SPA-фреймворками, но требует пересчёта после рендера компонентов:

useEffect(() => {
  AOS.init({ duration: 800 });
  AOS.refresh();
}, []);

Это обеспечивает корректное срабатывание кастомных функций плавности даже при динамическом контенте.

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

Оглавление