motiondivision / motiondivision/motion
[BUG] AnimatePresence with mode=popLayout doesn't consistently trigger opacity exit animations on elements with layout
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
2. Describe the bug
Motion elements with layout and exit animations don't always run their exit animations if they're inside an <AnimatePresence> that has a mode of "popLayout".
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
4. Steps to reproduce
Steps to reproduce the behavior:
- Click the "Add item" 4 times
- Click on an item. Notice it fades out.
- Click another item. Notice it disappears (its exit opacity animation is not triggered)
Behavior seems to continue, where the fade-out only happens for every other item.
5. Expected behavior
Exit animation is always applied.
6. Video or screenshots
https://github.com/framer/motion/assets/2922250/878ecf24-d382-4885-8db6-2765ab8d1e64
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction at app/page.tsx, following the listed steps with AnimatePresence mode="popLayout" and elements using layout and exit animations. Trace the relevant Motion and AnimatePresence behavior, then verify that every removed item consistently runs its opacity exit animation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100