1---
2title: Guard Against Zero on Initial Render
3impact: HIGH
4tags: container, measure, initial-render
5---
6 
7## Guard Against Zero on Initial Render
8 
9On initial render, measured bounds are 0. Guard against this to prevent animating from 0 to actual size.
10 
11**Incorrect (animates from 0 on mount):**
12 
13```tsx
14<motion.div animate={{ width: bounds.width }}>
15  <div ref={ref}>{children}</div>
16</motion.div>
17```
18 
19**Correct (falls back to auto on first frame):**
20 
21```tsx
22<motion.div animate={{ width: bounds.width > 0 ? bounds.width : "auto" }}>
23  <div ref={ref}>{children}</div>
24</motion.div>
25```
26