Back to Playgrounds
✨
Framer Motion Studio
Transform code into motion. Create stunning animations with Framer Motion.
Animation Templates
Code
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}...Live Preview
💡 Watch the animation play in real-time
How to Use Framer Motion
Basic Concepts
- ▸
initial- Starting animation state - ▸
animate- Target animation state - ▸
transition- Animation configuration - ▸
whileHover- Hover state animations - ▸
whileTap- Click/tap animations
Advanced Features
- ▸
variants- Reusable animation sets - ▸
staggerChildren- Sequential child animations - ▸
layout- Auto-animate layout changes - ▸
drag- Drag and drop interactions - ▸
spring- Physics-based motion