Войти
Креативная библиотека
Переходы страниц · view-transitions

View Transitions API

Нативные переходы страниц и DOM — без тяжёлой библиотеки

Tier 1Легко с AIОк на мобилеfree (platform)Браузерный API + CSS; Next/React обёртки

Design DNA

«Переход выглядит «родным» для ОС: один документ плавно становится другим.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Реализуй переходы через View Transitions API (нативно).
CSS view-transition-name точечно. Fallback: мгновенная смена без ошибки.
reduced-motion → без анимации. В Next — официальный/простой паттерн, без Barba если не нужен.

Что умеет

  • ·document.startViewTransition
  • ·shared element-подобные имена
  • ·MPA/SPA

Чего не умеет

  • ·Не везде 100% поддержка — нужен fallback
  • ·Не полный контроль как у Barba+GSAP

Когда брать

  • ·Современный Chrome/Edge/Safari
  • ·Лёгкие page/UI transitions

Когда не брать

  • ·Нужна сложная режиссура leave → Barba+GSAP

С чем сочетается

MotionNext.jsBarba (редко вместе)

Альтернативы

Barba.jsMotion AnimatePresenceCSS only

Типичные ошибки

  • ·Без fallback на старых браузерах
  • ·Анимировать огромные деревья

Демо и ссылки

Похожие