search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
22.57k stars 749 forks source link

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

Open NikxDa opened 2 months ago

NikxDa commented 2 months ago

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.