motiondivision / motiondivision/motion
[BUG] `whileHover` state does not reset when element transitions to `dragConstraints`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
Hey folks,
I am seeing an issue where the changes applied during hover with whileHover don't properly reset when combined with drag and dragConstraints. The reason seems to be that the hover detection doesn't properly work when the cursor leaves the element due to it transitioning back from its dragged position to its constrained position. The same problems can also be seen when using dragSnapToOrigin.
Steps to reproduce:
- Create a motion component with
drag,dragConstraintsandwhileHovereffects. - Drag the component so that the cursor is not inside the component anymore. Release the component. The component will return to the constrained position, but remain in the hovered state until the next hover end event.
- Drag the component so that the cursor remains inside the component. Release the component, but do not move your cursor. The component will return to the constrained position (so that the cursor is now outside of the component), but remain in the hovered state until you move your cursor.
CodeSandbox reproduction: https://codesandbox.io/p/sandbox/framer-motion-hover-bug-49yl5n
Expected behavior: The hovered state should be removed as soon as the cursor is not located over the element anymore, even if this happens due to the element being animated away from the cursor.
Video:
https://github.com/framer/motion/assets/3141005/cdd7908f-6990-4d6b-b567-9f71e4c09330
Please note that the lags in the video during drag & drop are caused by CleanShot X's recording. They aren't actually there.
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 reproduce the interaction using drag, dragConstraints, whileHover, and dragSnapToOrigin. Trace the drag and hover behavior until you find why the hover state remains after the element moves away, then verify that it resets immediately when the cursor is no longer over the element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100