motiondivision / motiondivision/motion
[BUG] Lazy import of motion.div breaks drag constraints.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
Hello! Recently found a bug, i use a simple div as a drag constraint for motion.div, it works as expected. However, whenever lazy component, which contains a motion.div with layoutId, is imported and rendered , it breaks the drag constraints.
https://github.com/framer/motion/assets/67691338/cb4b9b4a-b6c0-4890-924c-37c36a685883
Codesandbox:
https://codesandbox.io/s/gallant-hellman-rrrszc?file=/src/App.tsx
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 by running the linked CodeSandbox and inspect src/App.tsx, comparing the working simple-div constraint with the lazy component that contains motion.div and layoutId. Trace the library behavior involved in lazy rendering and drag constraints; the issue is resolved when the constraint continues working in that reproduction case.
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
- 38/100