Mastering Framer Motion Animations

Framer Motion has revolutionized how we think about animations in React. Its declarative API makes complex animations simple while maintaining excellent performance.

Getting Started

The beauty of Framer Motion lies in its simplicity. Converting a regular div to an animated component is as simple as:


jsx
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  Hello World
</motion.div>

Advanced Techniques

Gesture Animations

Framer Motion makes gesture-based animations trivial:


jsx
<motion.div
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
  drag
  dragConstraints={{ left: 0, right: 300 }}
/>

Scroll-Linked Animations

One of my favorite features is scroll-linked animations using useScroll:


jsx
const { scrollYProgress } = useScroll()
const opacity = useTransform(scrollYProgress, [0, 1], [1, 0])

<motion.div style={{ opacity }} />

Layout Animations

Framer Motion's layout animations are magical. Just add the layout prop:


jsx
<motion.div layout />

Performance Considerations

While Framer Motion is performant by default, here are some tips:

Use transform and opacity - These properties are GPU-accelerated
Avoid animating layout properties - Width, height, etc. trigger reflows
Use will-change sparingly - Only for frequently animated elements
Leverage useMotionValue - For high-frequency updates

Real-World Examples

In this portfolio, I've used Framer Motion extensively:

The hero section's parallax effect
The magnetic cursor interactions
The smooth page transitions
The scroll-driven text reveals

Each of these creates a polished, professional feel while maintaining 60fps performance.

Best Practices

Keep It Subtle

The best animations are often the ones you barely notice. They should enhance the user experience, not distract from it.

Respect User Preferences

Always respect prefers-reduced-motion:


jsx
const shouldReduceMotion = useReducedMotion()

<motion.div
  animate={shouldReduceMotion ? {} : { scale: 1.2 }}
/>

Test on Real Devices

What performs well on your development machine might struggle on mobile. Always test on real devices.

Conclusion

Framer Motion has become an essential tool in my development workflow. Its combination of power and simplicity makes it perfect for creating modern, engaging user interfaces.