Замена библиотек анимации на нативные Web API

Если ваш проект импортирует GSAP, Framer Motion или Anime.js только для обработки переходов между страницами, эффектов прокрутки или анимации появления элементов, вы несёте вес бандла, который браузер больше не требует от вас нести. Современные API веб-анимации достигли такого уровня зрелости, что замена JavaScript-библиотек анимации стала реалистичным вариантом для большинства повседневных задач UI.

Вот практический взгляд на то, что теперь предоставляет платформа.

Web Animations API: программное управление без библиотеки

Web Animations API (WAAPI) позволяет анимировать DOM-элементы напрямую в JavaScript, используя Element.animate(). Он даёт вам динамическое управление, за которым разработчики обычно обращаются к библиотекам — пауза, воспроизведение, реверс, перемотка — при этом используя тот же движок анимации браузера, что и CSS-анимации.

const card = document.querySelector('.card')
const animation = card.animate(
  [
    { transform: 'translateY(20px)', opacity: 0 },
    { transform: 'translateY(0)',    opacity: 1 }
  ],
  { duration: 400, easing: 'ease-out', fill: 'forwards' }
)

// Chain animations using the finished promise
animation.finished.then(() => console.log('Entrance complete'))

Вы получаете ступенчатые анимации через delay, последовательное связывание через .finished и управление воспроизведением через .playbackRate — всё это без единой зависимости.

Что это заменяет: Anime.js, Velocity.js и базовые сценарии использования GSAP. Поддержка браузерами: Поддерживается во всех современных браузерах. Смотрите текущее состояние внедрения на caniuse.com.

Примечание о доступности: Всегда проверяйте prefers-reduced-motion перед запуском движения. Передавайте duration: 0, когда пользователь предпочитает уменьшенное движение, а не пропускайте вызов анимации полностью, чтобы побочные эффекты компоновки от fill: 'forwards' всё ещё применялись.

const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
element.animate(keyframes, { duration: reduced ? 0 : 400, fill: 'forwards' })

CSS Scroll-Driven Animations: эффекты прокрутки без JavaScript

CSS Scroll-Driven Animations заменяют наиболее распространённый паттерн Intersection Observer + библиотека анимации: показ элементов по мере прокрутки пользователем.

@keyframes fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

Никакого JavaScript. Никаких библиотек. Браузер связывает прогресс анимации напрямую с позицией элемента в контейнере прокрутки.

Поддержка браузерами: Доступно в браузерах на базе Chromium, начиная с Chrome 115, и продолжает развиваться в других движках. Проверьте текущий статус поддержки на caniuse.com.

View Transitions API: переходы между страницами и состояниями

View Transitions API обрабатывает анимированную передачу между двумя состояниями UI — паттерн, который ранее требовал AnimatePresence от Framer Motion или пользовательской работы с таймлайнами GSAP.

function navigate(updateFn) {
  if (!document.startViewTransition) {
    updateFn() // Fallback for unsupported browsers
    return
  }
  document.startViewTransition(updateFn)
}

Для многостраничных приложений одно CSS-правило активирует межстраничные переходы:

@view-transition {
  navigation: auto;
}

Назначьте view-transition-name общим элементам, и браузер автоматически трансформирует их между страницами.

Поддержка браузерами: Переходы внутри одного документа широко поддерживаются в современных браузерах, в то время как межстраничные переходы продолжают внедряться в различных движках. Смотрите текущий статус на caniuse.com.

Что это заменяет: Переходы между страницами в Framer Motion, обёртки анимации React Router, пользовательскую логику смены страниц на GSAP.

Когда библиотеки всё ещё имеют смысл

Нативные API покрывают широкий спектр повседневных потребностей в анимации, но библиотеки сохраняют явные преимущества в конкретных сценариях:

• Физически основанное движение (пружинные анимации, инерция) — Framer Motion, React Spring
• Сложная анимация SVG — плагины GSAP MorphSVG или DrawSVG
• Продвинутая оркестрация таймлайнов для множества элементов
• Широкая кроссбраузерная абстракция, когда вы не можете полагаться на прогрессивное улучшение

Решение не в выборе между нативным и библиотекой — а в том, решает ли платформа уже вашу конкретную проблему.

Заключение

Перед добавлением зависимости для анимации проверьте, покрывает ли ваш сценарий использования Web Animations API, CSS Scroll-Driven Animations или View Transitions API. Для большинства анимаций появления, эффектов прокрутки и переходов между страницами они это делают. Оставьте библиотеки для специализированной работы, в которой они действительно превосходны — физически основанные пружины, сложный морфинг SVG и сложные многоэлементные таймлайны. Ваш бандл и ваши пользователи выиграют от этой разницы.

Часто задаваемые вопросы

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.