motiondivision / motiondivision/motion
[BUG] Layout issue moving elements into or out of a scrollable container
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
When moving elements (using layoutId) in or out of a parent element that has overflow:scroll or overflow:hidden, the element immediately disappears and doesn't appear again until it's inside the destination element.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/framer-motion-usescroll-element-scrolling-forked-zqvzdy
4. Steps to reproduce
Steps to reproduce the behavior:
- Open CodeSandbox link
- Click the "Move from Top Container to Bottom Container" button
5. Expected behavior
The box labeled "A" slowly moves from the top container to the bottom container without disappearing
6. Video or screenshots
(See Sandbox)
7. Environment details
Chrome 120.0.6099.217
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 trace the layoutId transition between the scrollable top and bottom containers. Reproduce it in Chrome using the stated button, then investigate the relevant Motion layout-handling entry point. Done means the labeled box remains visible and animates smoothly into the destination container instead of disappearing.
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
- 45/100