motiondivision / motiondivision/motion
[BUG] The animation breaks when quickly switching between tabs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
1. Describe the bug
If I switch the tab to another one and quickly switch back to the previous one, then 'exit' does not run and all the contents inside the tab do not show up
2. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/framer-motion-layout-animations-forked-x772fv
3. Steps to reproduce
If you are on 'Tomato' tab, then click tab 'Lettuce' and then quickly click 'Tomato' tab again
5. Expected behavior
The animation must be completed correctly and the content must always be shown
6. Video or screenshots
https://github.com/framer/motion/assets/58575721/d358ad35-81c7-416c-af13-9975c63e89d8
"framer-motion": "11.2.6",
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 and follow the Tomato-to-Lettuce-to-Tomato switching sequence while inspecting the tab animation behavior. Investigate why the exit step does not run and why the returning tab contents remain hidden. Done means the animation completes correctly and the content is always visible during rapid tab switches.
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
- 35/100