Плавні анімації переходів: framer-motion і View Transitions API

Плавні анімації переходів: framer-motion і View Transitions API

Уявіть: користувач клацає на товар у каталозі, бачить білий спалах, і за секунду — нова сторінка. Це не тільки дратує, а й погіршує Core Web Vitals — LCP і CLS. У результаті сайт втрачає конверсію: за даними наших проєктів, плавні переходи збільшують retention на 15–25%. Ми працюємо з проєктами будь-якого масштабу — від лендінгів до маркетплейсів із 10 000+ сторінок. Плавні переходи особливо важливі для e-commerce, де 80% взаємодій — навігація каталогом. Впровадження анімацій окупається за 1–2 місяці завдяки зростанню конверсії. Наша команда реалізує переходи, що скорочують сприйнятний час завантаження на 30–40% і покращують користувацький досвід. Замовте аудит поточних переходів — це займе один день.

Три ключові проблеми, які вирішують анімації переходів

Анімації переходів вирішують три завдання: просторовий контекст (користувач розуміє, куди перейшов), сприйняття швидкості (маскують час завантаження) та запобігання flickering (немає білих спалахів). Типові помилки реалізації: однакові переходи вперед/назад, ігнорування accessibility та анімації довші за 300 мс. Оптимальна тривалість — 200–250 мс.

Як вибрати між framer-motion і View Transitions API?

Вибір залежить від стеку та необхідної кастомізації. Framer-motion гнучкіший, але вимагає додаткового коду. View Transitions API — нативний підхід, особливо зручний для MPA і Next.js. Для складних сценаріїв (спрямовані переходи, shared elements) ми рекомендуємо framer-motion: він дає повний контроль. Зв'яжіться з нами для консультації — ми допоможемо підібрати оптимальне рішення.

Реалізація спрямованих переходів з framer-motion

Для ієрархічної навігації (каталог → товар → кошик) перехід має бути спрямованим: вперед — слайд вправо, назад — слайд вліво. У framer-motion це реалізується через кастомні variants з урахуванням історії навігації. Покроково:

1. Створіть хук useNavigationDirection, що відстежує історію та повертає 1 (вперед) або -1 (назад).
2. Визначте об'єкт variants з функціями, що приймають напрямок.
3. Використовуйте <AnimatePresence mode="wait"> та обгорніть вміст сторінки в <motion.div key={location.pathname} custom={direction} variants={variants} initial="initial" animate="animate" exit="exit" />.

Приклад коду:

const useNavigationDirection = () => {
  const [direction, setDirection] = useState(0);
  const location = useLocation();
  const prevLocation = useRef(location);
  const navHistory = useRef<string[]>([location.pathname]);

  useEffect(() => {
    const currentPath = location.pathname;
    const history = navHistory.current;
    const prevIndex = history.lastIndexOf(prevLocation.current.pathname);
    const currentIndex = history.indexOf(currentPath);

    if (currentIndex > prevIndex) setDirection(1); // вперед
    else setDirection(-1); // назад

    if (currentIndex === -1) {
      navHistory.current = [...history, currentPath];
    }

    prevLocation.current = location;
  }, [location]);

  return direction;
};

const variants = {
  initial: (dir: number) => ({ x: dir > 0 ? '100%' : '-100%', opacity: 0 }),
  animate: { x: 0, opacity: 1 },
  exit: (dir: number) => ({ x: dir > 0 ? '-100%' : '100%', opacity: 0 }),
};

Що таке View Transitions API і як його використовувати?

View Transitions API — нативний браузерний механізм для плавних переходів між сторінками. Підтримується в Chrome 111+ і Safari 18+. Для MPA і Next.js потрібен мінімальний код:

async function navigateTo(url) {
  if (!document.startViewTransition) {
    window.location.href = url;
    return;
  }
  const transition = document.startViewTransition(async () => {
    const html = await fetch(url).then(r => r.text());
    const doc = new DOMParser().parseFromString(html, 'text/html');
    document.querySelector('main').replaceWith(doc.querySelector('main'));
    history.pushState({}, '', url);
  });
  await transition.ready;
}

CSS для керування анімацією:

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-100%);
  }
}

::view-transition-old(root) {
  animation: 250ms ease slide-to-left;
}

::view-transition-new(root) {
  animation: 250ms ease slide-from-right;
}

.product-image {
  view-transition-name: product-hero;
}

Shared element transitions — hero-анімації, де конкретний елемент (картка товару) плавно «перетворюється» на hero-зображення на сторінці товару. Це найвражаючіша можливість View Transitions API.

Скелетон-екрани та доступність анімацій

Під час переходу дані часто завантажуються асинхронно. Спіннер показує «завантаження» — скелетон показує структуру сторінки:

const ProductSkeleton: React.FC = () => (
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    className="skeleton-wrapper"
  >
    <div className="skeleton skeleton--image" />
    <div className="skeleton skeleton--title" />
    <div className="skeleton skeleton--text" />
    <div className="skeleton skeleton--text skeleton--short" />
  </motion.div>
);

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

Доступність анімацій обов'язкова: використовуйте prefers-reduced-motion: reduce. У CSS відключіть анімації для ::view-transition-group, а в framer-motion — хук useReducedMotion з duration: 0. При швидкій навігації анімації мають перериватися — framer-motion робить це автоматично через AnimatePresence, а для кастомних анімацій достатньо скоротити duration до 150–200 мс.

Що входить в роботу

• Аудит поточної навігації та продуктивності (Core Web Vitals, водоспад запитів).
• Вибір підходу: framer-motion, View Transitions API або комбінація.
• Реалізація анімацій з урахуванням accessibility (prefers-reduced-motion).
• Створення скелетон-екранів для всіх шаблонів.
• Інтеграція з роутером (React Router, Next.js, Vue Router).
• Оптимізація під Core Web Vitals (LCP < 2.5s, CLS < 0.1).
• Документування коду та навчання команди.
• Гарантія на анімації — 6 місяців після деплою.

Процес роботи та терміни

Етапи: аналітика (аудит поточної навігації) → проєктування (вибір підходу, прототип) → реалізація → тестування Core Web Vitals і accessibility → деплой. Терміни орієнтовно:

Отримайте консультацію щодо вашого проєкту — наша команда має багаторічний досвід веб-розробки та понад 40 реалізованих проєктів з анімаціями.