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 (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Animated Box
    </motion.div>
  )
}

#Hover and Tap Animations

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: 'spring', stiffness: 300 }}
>
  Click Me
</motion.button>

#Scroll Animations

import { motion, useScroll, useTransform } from 'framer-motion'

function ParallaxSection() {
  const { scrollYProgress } = useScroll()
  const y = useTransform(scrollYProgress, [0, 1], [0, -100])

  return (
    <motion.div style={{ y }}>
      Parallax Content
    </motion.div>
  )
}

#AnimatePresence

import { AnimatePresence, motion } from 'framer-motion'

function Modal({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Modal Content
        </motion.div>
      )}
    </AnimatePresence>
  )
}

#Performance Tips

1. GPU Acceleration: Use transform and opacity
2. Layout Animations: Use layout prop carefully
3. Reduced Motion: Listen to user preferences

#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.