React

Как анимировать появление компонентов в React с помощью Framer Motion. Это один из тех инструментов, который делает твой интерфейс живым, без особых усилий.

🎬 Пример анимации при маунте:

import { motion } from 'framer-motion'

const FadeIn = ({ children }: { children: React.ReactNode }) => (
  <motion.div
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.3 }}
  >
    {children}
  </motion.div>
)

Используй его просто как обёртку:

<FadeIn>
  <Card>Контент</Card>
</FadeIn>

✨ Где использовать?

🔘Модалки
🔘Всплывающие подсказки
🔘Новые элементы списка
🔘Контент, который появляется после загрузки

Такая анимация делает взаимодействие с интерфейсом приятнее, особенно если тебе важна микроанимация и внимание к деталям. Framer Motion — мощный, но можно начать с малого.

✍️ @React_lib

👍2

www.tgoop.com/React_lib/693

998 viewsJun 26 at 07:04

Как анимировать появление компонентов в React с помощью Framer Motion. Это один из тех инструментов, который делает твой интерфейс живым, без особых усилий.

🎬 Пример анимации при маунте:

import { motion } from 'framer-motion'

const FadeIn = ({ children }: { children: React.ReactNode }) => (
  <motion.div
    initial={{ opacity: 0, y: 10 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.3 }}
  >
    {children}
  </motion.div>
)

<FadeIn>
  <Card>Контент</Card>
</FadeIn>

BY React