Как делать анимации в React с Framer Motion?

Middle
190 просмотров
AFK Offer AI

Framer Motion — декларативная библиотека анимаций. Заменяешь div на motion.div, добавляешь animate={{ opacity: 1 }} и initial={{ opacity: 0 }}. Поддерживает layout-анимации (AnimatePresence для exit-анимаций), gesture-анимации (whileHover, whileTap, drag), spring physics. Всё через пропсы — не нужно писать CSS keyframes. Variants позволяют оркестрировать анимации дочерних элементов. Тяжелее CSS-анимаций, но намного выразительнее.

Следующий вопрос

Как правильно обрабатывать формы с Formik?