Сравни фреймворки для анимации по назначению и типичным сценариям применения.

Фреймворки для анимации: Framer Motion (декларативные анимации в React), GSAP (сложные таймлайны), React Spring (физика), Lottie (After Effects), Anime.js. Различаются назначением и стилем API.

Фреймворки и сценарии

Framer Motion

Декларативные анимации для React:

<motion.div animate={{ x: 100 }} transition={{ duration: 0.3 }} />

• Когда: анимации в React (появление/исчезновение, жесты, layout-анимации, переходы страниц). Простой декларативный API.

GSAP (GreenSock)

Мощная императивная библиотека, таймлайны:

gsap.to('.box', { x: 100, duration: 1 });

• Когда: сложные оркестрованные анимации, таймлайны, скролл-анимации (ScrollTrigger), не только React. Производительная.

React Spring

Физически-реалистичные анимации (пружины):

const props = useSpring({ opacity: 1, from: { opacity: 0 } });

• Когда: естественные, «физичные» движения в React.

Lottie

Проигрывание анимаций из After Effects (JSON):

• Когда: сложные дизайнерские анимации (иллюстрации, лоадеры), созданные дизайнером.

Anime.js

Лёгкая библиотека для JS-анимаций (не привязана к React):

• Когда: анимации в любом проекте, простой API.

Как выбирать

• Анимации в React (жесты, переходы) → Framer Motion.
• Сложные таймлайны, скролл, вне React → GSAP.
• Физичные движения → React Spring.
• Дизайнерские анимации из AE → Lottie.
• Лёгкое, вне React → Anime.js.

Коротко для собеседования

Фреймворки анимации: Framer Motion (декларативно в React — жесты, переходы, layout), GSAP (мощные таймлайны, скролл-анимации, вне React), React Spring (физика/пружины в React), Lottie (анимации из After Effects), Anime.js (лёгкое, любой проект). Выбор: React → Framer Motion, сложное/скролл → GSAP, физика → React Spring, дизайнерское → Lottie.