Переходы страниц · barba

Barba.js

Плавные переходы между страницами — SPA-вайб без React/Vue

Tier 2СреднеОк на мобилеfree (MIT)Vanilla / любой MPA (не обязателен React/Vue)

Design DNA

«Сайт — это одна бесконечная комната. Клик по ссылке не перезагружает мир, а меняет декорации с кинематографичным переходом.»

Use with AI

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

Нужны плавные переходы между страницами (портфолио/лукбук) через Barba.js.
Минимальный leave/enter (лучше с лёгким GSAP). Сохрани нужное состояние (плеер/скролл).
Документируй re-init компонентов после смены страницы. Focus + prefers-reduced-motion.
Если проект на Next App Router — сначала оцени View Transitions; Barba только если нужен полный контроль MPA.
Не используй Barba для внутристраничного скролла — для этого Lenis.

Что умеет

·Перехватывать навигацию (PJAX)
·Анимировать уход старого контейнера и приход нового
·Сохранять состояние (плеер, скролл) между переходами
·Связка с GSAP timelines на leave/enter

Чего не умеет

·Не анимирует внутристраничный скролл (нужен Lenis / ScrollTrigger)
·Не замена Next.js App Router «из коробки»

Когда брать

·Сайт-портфолио или лукбук, где страницы перетекают друг в друга
·Нужен полный контроль leave → enter на мультистраничнике

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

·Сложный e-commerce / админка с частой сменой состояния корзины
·Уже Next App Router + View Transitions хватает
·Одна страница без переходов

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

GSAPView Transitions APILenis (скролл отдельно)

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

Native View TransitionsNext.js transitionsSwup

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

·Двойные инициализации скриптов после transition
·Игнор accessibility focus
·Путать с Lenis (это другой слой)

Демо и ссылки

barba.js.org