UI motion · motion

Motion (Framer Motion)

React-first анимации UI: layout, жесты, списки без боли

Tier 2Легко с AIОк на мобилеfree (MIT) / Motion+React, Next.js

Design DNA

«Интерфейс «дышит»: кнопки, модалки и списки двигаются так, будто их рисовали в Framer.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Используй Motion (framer-motion) для UI в React/Next.
Точечные анимации: кнопки, списки, модалки, AnimatePresence.
Не тащи GSAP, если хватает Motion.
prefers-reduced-motion → мгновенные состояния без spring.
Сохрани существующие токены и компоненты проекта.

Что умеет

·Declarative motion в JSX
·layout / shared layout transitions
·AnimatePresence для mount/unmount
·Жесты drag / hover / tap

Чего не умеет

·Не scroll-оркестратор уровня GSAP ScrollTrigger
·Не замена WebGL / 3D

Когда брать

·React/Next и нужны микро-взаимодействия
·Модалки, табы, списки, page enter

Когда не брать

·Сайт-фильм по скроллу → GSAP
·Vanilla HTML без React → Anime.js / CSS

С чем сочетается

AutoAnimateView TransitionsGSAP (точечно)

Альтернативы

GSAPAnime.jsCSS transitions

Типичные ошибки

·Анимировать всё подряд → шум
·Путать с GSAP scroll-фильмом
·Забыть reduced-motion

Демо и ссылки

motion.dev Framer Motion docs