motion

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4

Performance: Uses native ScrollTimeline API when available for hardware acceleration.

Создавайте сложные анимации React с помощью Motion (ранее Framer Motion) — декларативная анимация, жесты (перетаскивание, наведение, касание), эффекты прокрутки, пружинная физика, анимация макета и манипуляции с SVG. Оптимизируйте размер пакета с помощью LazyMotion (4,6 КБ) или Animate mini (2,3 КБ). Используйте при: добавлении взаимодействий перетаскивания, создании анимации, запускаемой прокруткой, реализации модальных диалогов с переходами, создании каруселей с импульсом, анимации переходов страниц/маршрутов, создании главных разделов параллакса, реализации аккордеонов с плавным развертыванием/свертыванием или оптимизации размеров пакета анимации. Для простой анимации списка используйте вместо этого навык автоматической анимации (3,28 КБ против 34 КБ). Устранение неполадок: не работает выход AnimatePresence, проблемы с производительностью большого списка, конфликты переходов Tailwind, ошибки Next.js «использовать клиент», проблемы с компоновкой прокручиваемого контейнера или ошибки сборки Cloudflare Workers (решено в декабре 2024 г.). Источник: joaquimcassano/ideas-marketplace.