Framer Motion — популярная библиотека анимации для React. Чтобы начать работу с Framer Motion, вы можете воспользоваться следующими методами:

1. Установка. Начните с установки Framer Motion в свой проект React. Это можно сделать, выполнив следующую команду в каталоге вашего проекта:

npm install framer-motion

2. Импорт: после установки вам необходимо импортировать необходимые компоненты из библиотеки Framer Motion в ваши компоненты React. Например:

import { motion } from 'framer-motion';

3. Базовая анимация: Framer Motion предоставляет широкий спектр вариантов анимации. Вы можете анимировать компоненты, используя такие свойства, как animate, initial, whileHoverи другие. Вот пример анимации непрозрачности компонента:

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  Hello, Framer Motion!
</motion.div>

4. Варианты: Framer Motion позволяет определять варианты анимации, которые можно повторно использовать в нескольких компонентах. Варианты определяют различные состояния анимации и могут быть легко применены к компонентам. Вот пример:

const boxVariants = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
};
<motion.div
  variants={boxVariants}
  initial="initial"
  animate="animate"
  transition={{ duration: 1 }}
>
  Animated Box
</motion.div>

5. Жесты: Framer Motion также поддерживает анимацию жестов, что позволяет создавать интерактивные элементы пользовательского интерфейса. Вы можете использовать такие свойства, как whileHover, whileTapи whileDrag, чтобы добавить анимацию на основе жестов. Вот пример перетаскиваемого компонента:

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
>
  Drag me!
</motion.div>

Следуя этим методам, вы сможете начать использовать Framer Motion для создания потрясающих анимаций в ваших приложениях React.