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