└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | 1. AnimatePresence Best Practices:
  2 | ```jsx
  3 | // ❌ Element disappears instantly
  4 | {isVisible && <motion.div animate={{ opacity: 1 }} />}
  5 | 
  6 | // ✅ Element animates out properly
  7 | <AnimatePresence>
  8 |   {isVisible && (
  9 |     <motion.div 
 10 |       key="unique-key"
 11 |       initial={{ opacity: 0 }}
 12 |       animate={{ opacity: 1 }}
 13 |       exit={{ opacity: 0 }}
 14 |     />
 15 |   )}
 16 | </AnimatePresence>
 17 | ```
 18 | 
 19 | 2. Layering for Complex Animations:
 20 | ```jsx
 21 | // Like in the trash example
 22 | <Container>
 23 |   <BackLayer /> {/* Behind stuff */}
 24 |   <ContentLayer layoutId="content" /> {/* Moving content */}
 25 |   <FrontLayer /> {/* Mask or overlay */}
 26 | </Container>
 27 | ```
 28 | 
 29 | 3. Delays for Natural Sequences:
 30 | ```jsx
 31 | // Stagger children
 32 | <motion.div animate={{ opacity: 1 }}>
 33 |   <motion.div animate={{ y: 0 }} transition={{ delay: 0 }} />
 34 |   <motion.div animate={{ y: 0 }} transition={{ delay: 0.1 }} />
 35 |   <motion.div animate={{ y: 0 }} transition={{ delay: 0.2 }} />
 36 | </motion.div>
 37 | ```
 38 | 
 39 | 4. Blur + Scale for Depth:
 40 | ```jsx
 41 | <motion.div
 42 |   initial={{ scale: 1.1, filter: "blur(4px)", opacity: 0 }}
 43 |   animate={{ scale: 1, filter: "blur(0px)", opacity: 1 }}
 44 |   exit={{ scale: 0.9, filter: "blur(4px)", opacity: 0 }}
 45 | />
 46 | ```
 47 | 
 48 | 5. Layout Transitions:
 49 | ```jsx
 50 | // Smooth height/width changes
 51 | <motion.div layout>
 52 |   {expanded && <Content />}
 53 | </motion.div>
 54 | 
 55 | // Position-only for text
 56 | <motion.h1 layout="position">
 57 |   Title
 58 | </motion.h1>
 59 | ```
 60 | 
 61 | 6. Coordinated Animations with LayoutId:
 62 | ```jsx
 63 | // From list to modal
 64 | <motion.div layoutId={`item-${id}`}>
 65 |   {isExpanded ? <FullContent /> : <Preview />}
 66 | </motion.div>
 67 | ```
 68 | 
 69 | 7. Mode Controls for AnimatePresence:
 70 | ```jsx
 71 | // Wait for exit before enter
 72 | <AnimatePresence mode="wait">
 73 | 
 74 | // Pop out of layout flow during exit
 75 | <AnimatePresence mode="popLayout">
 76 | ```
 77 | 
 78 | 8. Spring Transitions for Natural Feel:
 79 | ```jsx
 80 | <MotionConfig
 81 |   transition={{
 82 |     type: "spring",
 83 |     duration: 0.5,
 84 |     bounce: 0.2
 85 |   }}
 86 | >
 87 |   <App />
 88 | </MotionConfig>
 89 | ```
 90 | 
 91 | 9. Handling Complex State Sequences:
 92 | ```jsx
 93 | // Like in trash example
 94 | useEffect(() => {
 95 |   if (isExiting) {
 96 |     // Sequence of state changes
 97 |     const t1 = setTimeout(() => setPhase1(true), 300)
 98 |     const t2 = setTimeout(() => setPhase2(true), 600)
 99 |     return () => {
100 |       clearTimeout(t1)
101 |       clearTimeout(t2)
102 |     }
103 |   }
104 | }, [isExiting])
105 | ```
106 | 
107 | 10. Using Custom Props for Dynamic Variants:
108 | ```jsx
109 | <AnimatePresence custom={direction}>
110 |   <motion.div
111 |     custom={direction}
112 |     variants={{
113 |       exit: (direction) => ({
114 |         x: direction === 'left' ? -100 : 100
115 |       })
116 |     }}
117 |   />
118 | </AnimatePresence>
119 | ```
120 | 


--------------------------------------------------------------------------------