Framer Motion интеграция

Chakra UI предоставляет удобный способ построения интерфейсов на основе React с поддержкой системной стилизации, а Framer Motion — мощный инструмент для анимаций. Их интеграция позволяет создавать сложные анимационные интерфейсы, сохраняя удобство декларативного синтаксиса и совместимость со стилевыми системами Chakra UI.

Установка зависимостей

Для работы требуется установить @chakra-ui/react и framer-motion:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

При использовании TypeScript рекомендуется также установить типы для React и Emotion:

npm install --save-dev @types/react @types/react-dom

Основной принцип интеграции

Chakra UI использует motion компоненты Framer Motion через обёртку chakra() или компонент motion напрямую. Для этого применяется метод motion.custom (в новых версиях motion импортируется напрямую) или создаётся анимированный компонент на базе существующего Chakra UI:

import { chakra, Box } from "@chakra-ui/react";
import { motion } from "framer-motion";

const MotionBox = motion(chakra.div);

<MotionBox
  bg="teal.500"
  w="200px"
  h="200px"
  animate={{ scale: 1.2 }}
  transition={{ duration: 0.5 }}
/>

Здесь MotionBox наследует все свойства Chakra UI (bg, w, h) и одновременно поддерживает анимации Framer Motion (animate, initial, exit, whileHover).

Анимация состояний компонентов

Chakra UI предоставляет компоненты с поддержкой псевдоклассов (_hover, _focus, _active). Framer Motion позволяет расширить возможности анимаций за пределы стандартных CSS-трансформаций:

<MotionBox
  w="150px"
  h="150px"
  bg="purple.400"
  whileHover={{ scale: 1.1, rotate: 10 }}
  whileTap={{ scale: 0.9, rotate: -10 }}
/>
  • whileHover — анимация при наведении курсора
  • whileTap — анимация при клике или тапе

Такая интеграция позволяет создавать динамичные, отзывчивые интерфейсы без использования дополнительных CSS или классов.

Использование анимаций с layout и позиции

Framer Motion поддерживает анимации layout, которые автоматически анимируют изменение размеров и положения элементов. Chakra UI предоставляет гибкую систему layout через Flex, Stack, Grid. Для анимации layout достаточно обернуть компонент в motion и использовать prop layout:

import { VStack, Button } from "@chakra-ui/react";

const MotionVStack = motion(VStack);

<MotionVStack layout spacing={4}>
  {items.map(item => (
    <MotionBox
      key={item.id}
      layout
      p={4}
      bg="orange.300"
      borderRadius="md"
    >
      {item.text}
    </MotionBox>
  ))}
</MotionVStack>

layout автоматически анимирует перемещение и изменение размеров элементов при добавлении или удалении из списка.

Анимация появления и исчезновения

Для анимации компонентов при монтировании и размонтировании используются props initial, animate и exit. Chakra UI можно совместить с Framer Motion через компонент AnimatePresence:

import { AnimatePresence, motion } from "framer-motion";

<AnimatePresence>
  {isVisible && (
    <MotionBox
      key="modal"
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 20 }}
      transition={{ duration: 0.3 }}
      bg="blue.400"
      p={6}
      borderRadius="lg"
    >
      Модальное окно
    </MotionBox>
  )}
</AnimatePresence>

AnimatePresence гарантирует корректное срабатывание анимации при удалении компонента из DOM.

Анимации с системными стилями Chakra UI

Chakra UI использует тему и tokens для цветов, отступов, размеров и шрифтов. Анимации Framer Motion можно интегрировать с этими системными значениями:

import { useTheme } from "@chakra-ui/react";

const theme = useTheme();

<MotionBox
  w="100px"
  h="100px"
  bg={theme.colors.green[400]}
  whileHover={{ scale: 1.2 }}
  transition={{ duration: 0.4 }}
/>

Такой подход сохраняет единообразие дизайна и упрощает масштабирование интерфейсов.

Совмещение с chakra фабрикой

Метод chakra() позволяет создавать кастомные компоненты с полным набором Chakra UI props. Для анимации с Framer Motion достаточно обернуть результат chakra в motion:

const MotionCustomButton = motion(chakra.button);

<MotionCustomButton
  bg="pink.400"
  color="white"
  p={4}
  borderRadius="md"
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Анимированная кнопка
</MotionCustomButton>

Это даёт гибкость для сложных интерфейсов, где нужно одновременно использовать дизайн-систему Chakra UI и анимации Framer Motion.

Ключевые рекомендации

  • Для простых анимаций лучше использовать whileHover, whileTap и animate.
  • Для анимаций layout и списков применять layout и AnimatePresence.
  • Использовать chakra() для создания настраиваемых анимированных компонентов с сохранением всех props Chakra UI.
  • Применять системные tokens темы для цвета, отступов и размеров, чтобы анимации были согласованы с дизайном.
  • Для модальных окон, всплывающих уведомлений и динамических списков обязательно использовать AnimatePresence для корректного эффекта появления и исчезновения.

Интеграция Framer Motion с Chakra UI позволяет создавать интерфейсы с плавными, отзывчивыми и красивыми анимациями, сохраняя при этом преимущества декларативного подхода и системной стилизации.

Оглавление