Створення анімацій переходів між сторінками сайту

Створення анімацій переходів між сторінками

Анімації переходів роблять навігацію сприйманою як неперервний процес, а не серія телепортацій. Правильно реалізовані переходи скорочують сприйманий час завантаження та дають користувачам просторовий контекст («я пішов глибше» vs «я повернувся назад»). Неправильно — вони дратують затримками та конфліктують з логікою маршрутизатора.

Підхід за стеком

Framer Motion + React Router

Базова схема: обгортаємо <Routes> в <AnimatePresence>, кожен екран — це <motion.div> з варіантами анімації:

import { AnimatePresence, motion } from 'framer-motion';
import { useLocation, Routes, Route } from 'react-router-dom';

const pageVariants = {
  initial:  { opacity: 0, x: 20 },
  animate:  { opacity: 1, x: 0 },
  exit:     { opacity: 0, x: -20 },
};

const pageTransition = {
  type: 'tween',
  ease: 'anticipate',
  duration: 0.25,
};

export const AnimatedRoutes: React.FC = () => {
  const location = useLocation();

  return (
    <AnimatePresence mode="wait" initial={false}>
      <Routes location={location} key={location.pathname}>
        <Route path="/"        element={<PageWrapper><Home /></PageWrapper>} />
        <Route path="/about"   element={<PageWrapper><About /></PageWrapper>} />
        <Route path="/catalog" element={<PageWrapper><Catalog /></PageWrapper>} />
      </Routes>
    </AnimatePresence>
  );
};

const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <motion.div
    variants={pageVariants}
    initial="initial"
    animate="animate"
    exit="exit"
    transition={pageTransition}
  >
    {children}
  </motion.div>
);

mode="wait" гарантує, що стара сторінка повністю виходить перед появою нової. mode="sync" — обидві анімуються одночасно (швидше, але може виглядати хаотично).

Спрямовані переходи (вперед/назад)

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

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 (нативний браузерний підхід)

Підтримується в 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 для управління анімацією:

/* Переопреділіть дефолтний cross-fade */
@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;
}

/* Для конкретних елементів — shared element transition */
.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; }
}

Скасування анімацій при швидкій навігації

Якщо користувач клацає швидко, анімації повинні переривуватись, а не накопичуватись в черзі:

// framer-motion обробляє це автоматично через AnimatePresence
// Для власних анімацій используйте useAnimation:
const controls = useAnimation();

const navigate = async (to: string) => {
  await controls.start('exit'); // чекаємо виходу
  router.push(to);
};

// Або просто скоротьте duration на 150-200ms
// що робить переривання непомітним для користувачів

Доступність

Анімації можуть бути неприємні для людей з вестибулярними розладами. Обов'язковий медіа-запит:

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

У framer-motion:

const shouldReduceMotion = useReducedMotion();

const transition = shouldReduceMotion
  ? { duration: 0 }
  : { duration: 0.25, ease: 'easeInOut' };

Часові рамки