motiondivision / motiondivision/motion

[BUG] `whileHover` state does not reset when element transitions to `dragConstraints`

Open
#2,591 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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:

  1. Create a motion component with drag, dragConstraints and whileHover effects.
  2. 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.
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.