tgoop.com/React_lib/693
Create:
Last Update:
Last Update:
Как анимировать появление компонентов в 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
BY React

Share with your friend now:
tgoop.com/React_lib/693
