Introduction

You added overflow: hidden and the collapse still looks wrong. The problem is not the motion component. It is the gap on your parent flex container.

What is happening

AnimatePresence keeps the exiting element mounted during the exit animation. It is still a flex child. Flex children still receive the parent gap even at height: 0.

You end up with an invisible ghost gap below your toggle while the panel animates out. That is the flicker.

The fix

Animate marginTop alongside height. Set it to negative the gap value on enter and exit. This cancels the gap exactly as height shrinks to zero.

// ❌ before — ghost gap remains after collapse
<motion.div
  initial={{ height: 0, opacity: 0 }}
  animate={{ height: 'auto', opacity: 1 }}
  exit={{ height: 0, opacity: 0 }}
  style={{ overflow: 'hidden' }}
>

// ✅ after — collapses cleanly
// marginTop: -40 cancels the parent gap-10 (40px) on exit
// marginTop: 0 when open — parent gap handles spacing normally
<motion.div
  initial={{ height: 0, opacity: 0, marginTop: -40 }}
  animate={{ height: 'auto', opacity: 1, marginTop: 0 }}
  exit={{ height: 0, opacity: 0, marginTop: -40 }}
  style={{ overflow: 'hidden' }}
>

Match -40 to whatever gap your parent uses.

Bonus — add blur

// blur makes the expand and collapse feel nicer and less harsh
<motion.div
  initial={{ height: 0, opacity: 0, marginTop: -40, filter: 'blur(8px)' }}
  animate={{ height: 'auto', opacity: 1, marginTop: 0, filter: 'blur(0px)' }}
  exit={{ height: 0, opacity: 0, marginTop: -40, filter: 'blur(8px)' }}
  transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
  style={{ overflow: 'hidden' }}
>

Flex gap does not care about height. A collapsed flex child is still a flex child. Animate the margin to match and the problem disappears.

How To Fix Framer Motion AnimatePresence Collapse Leaving a Gap

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

Introduction

What is happening

The fix

Bonus — add blur

Command Palette

Comments

More from this blog

Introduction

What is happening

The fix

Bonus — add blur