React Animations with Framer Motion

Framer Motion is one of the most powerful animation libraries for React. It stands out with its simple API and powerful features.

Basic Animations

import { motion } from 'framer-motion'
function AnimatedBox() {
  return (
          initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Animated Box
    
  )
}

Hover and Tap Animations

  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: 'spring', stiffness: 300 }}
>
  Click Me

Scroll Animations

import { motion, useScroll, useTransform } from 'framer-motion'
function ParallaxSection() {
  const { scrollYProgress } = useScroll()
  const y = useTransform(scrollYProgress, [0, 1], [0, -100])
  return (
    
      Parallax Content
    
  )
}

AnimatePresence

import { AnimatePresence, motion } from 'framer-motion'
function Modal({ isOpen, onClose }) {
  return (
    
      {isOpen && (
                  initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Modal Content
        
      )}
    
  )
}

Performance Tips

Conclusion

Framer Motion is a perfect tool to bring your React applications to life. Thanks to its simple API, you can easily create complex animations.