Declarative State vs Imperative Properties
CSS animations describe what happens over time: 'from this property value to that property value, over this duration, with this easing.' Framer Motion describes what state looks like: 'in the visible state, these properties have these values. In the hidden state, these other values.' The transition is inferred, not specified.
This is not just a syntax difference. It changes how you build animation systems. In CSS, you manage animation state through class names and transitions. In Framer Motion, you define variants (named states) and let the component handle transitions between them. Adding an animation to an existing component is adding a variant, not writing new transition code.
Variants and Why They Scale
Variants are named animation states that propagate through the component tree. Set 'visible' on a parent, and all children with a 'visible' variant definition animate to their visible state — with automatic staggering if you configure delayChildren. This is how you animate coordinated sequences without orchestration code.
Before Framer Motion, I was managing animation timing manually with setTimeout and CSS class additions. The cognitive overhead was significant. Variants collapsed that into a single prop change on the parent.
Key takeaways
- Define animations as variants (named states) rather than property transitions — this makes adding and changing animations composable across a component tree
- Parent variants propagate to children automatically — use this with staggerChildren to create entrance sequences without manual timing code
- useAnimation() lets you trigger animations imperatively when declarative state isn't enough — use it for scroll-triggered animations and gesture responses
Conclusion
The mental model shift from 'animate properties' to 'define states and transition between them' is Framer Motion's most valuable contribution. Once you see it, the declarative approach feels obviously right for UI motion.
Enjoyed this article?
Vivek Kumar Singh
Technical Expert · Full Stack Cloud Engineer · Tokyo, Japan
Related articles
Building Smooth Page Transitions (The Part Most Tutorials Skip)
March 1, 2025 · 7 min read
When Animations Hurt Your UX (And How to Know You've Gone Too Far)
February 22, 2025 · 5 min read
VivekUI: A Free React Component Library With Zero Dependencies
August 23, 2026 · 9 min read