1---
2title: Two-Div Pattern for Animated Bounds
3impact: HIGH
4tags: container, measure, motion
5---
6 
7## Two-Div Pattern for Animated Bounds
8 
9Use an outer animated div and an inner measured div. Never measure and animate the same element.
10 
11**Incorrect (measure and animate same element — creates feedback loop):**
12 
13```tsx
14function AnimatedContainer({ children }) {
15  const [ref, bounds] = useMeasure();
16  return (
17    <motion.div ref={ref} animate={{ height: bounds.height }}>
18      {children}
19    </motion.div>
20  );
21}
22```
23 
24**Correct (separate measure and animate targets):**
25 
26```tsx
27function AnimatedContainer({ children }) {
28  const [ref, bounds] = useMeasure();
29  return (
30    <motion.div animate={{ height: bounds.height }}>
31      <div ref={ref}>{children}</div>
32    </motion.div>
33  );
34}
35```
36