Плавные анимации переходов: 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 реализованных проектов с анимациями.