Variants in Motion

Learn how to use variants in Motion (prev Framer Motion) to define named animation states and orchestrate complex animations with minimal code.

Variants let you swap between predefined visual states (like "hidden" and "visible") using simple labels instead of iinline style objects. They keep your animation code clean and unlock powerful features like staggered children, nested orchestration, and gesture-driven state changes.

In this video:
- Define variants as named animation targets
- Switching between states with animate, whileHover, and whileTap
- Propagating animations to child elements automatically

Example: https://motion.dev/examples/react-variants
Tutorial: https://motion.dev/tutorials/react-variants

Видео Variants in Motion канала Motion