Animation in React is smooth changes in CSS properties of elements (movement, appearance, disappearance). React knows nothing about animation — it just changes state, and CSS or libraries animate.
Simple analogy: Imagine you are a cartoon director.
Animation methods:
1. CSS Transitions (simplest):
1function FadeIn({ show, children }) {2 return (3 <div style={{4 opacity: show ? 1 : 0,5 transition: 'opacity 0.3s ease' // Smooth appearance6 }}>7 {children}8 </div>9 );10}
2. Framer Motion (most popular library):
1import { motion, AnimatePresence } from 'framer-motion';23<AnimatePresence>4 {isVisible && (5 <motion.div6 initial={{ opacity: 0, x: -100 }}7 animate={{ opacity: 1, x: 0 }}8 exit={{ opacity: 0, x: 100 }}9 >10 Hi, I am animating!11 </motion.div>12 )}13</AnimatePresence>
3. React Spring (physics animation):
1import { useSpring, animated } from 'react-spring';23function App() {4 const props = useSpring({ to: { opacity: 1 }, from: { opacity: 0 } });5 return <animated.div style={props}>I am appearing</animated.div>;6}
4. GSAP (professional animation): For complex scenario animations (advertising, promo sites).