You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I use useMotionValue and useSpring to track the cursors position and animate a div to follow it, worked fine with the last v10 version. After upgrading to v11 I noticed two specific bugs.
If I click while moving my cursor the animated div will accelerate in the direction it was facing while the click happened. it is very easy to reproduce by spamming click while making circles with the cursor in the codeSandbox I provide below.
when I have dev tools open the animation is glitchy.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
update them with a useEffect and a window.addEventListener("mousemove", handleMouseMove). handleMouseMove just sets the two previous motion values to event.clientX and event.clientY respectively.
pass the motion values through a useSpring each.
use the values returned from the two useSpring in the style prop of a motion.div for the x and y.
bug 1, while making circular movements with the cursor, spam click. the animated div should soon gain speed and move outside the page and the expected path it should follow .
bug 2, inspect the page and open the dev tools. while they are open move the cursor. it doesn't move smoothly anymore.
5. Expected behavior
bug 1 - it should work like pre v11, clicking should not affect the movement/velocity of the element.
bug 2 - it should not be laggy with dev tools open.
6. Video or screenshots
CodeSandbox reproduction.
2024-04-08.00-00-04.mp4
and locally with a clean Next.js project.
2024-04-07.23-49-28.mp4
7. Environment details
Windows 11 Education 23H2.
Chrome Version 123.0.6312.106 (Official Build) (64-bit).
8. Extra question
In the docs it is mentioned that using motion values inside the style prop does not make use of hardware acceleration.
Is there a better way to implement the functionality I want? what would be the best way to track the cursors position and animate an element?
The text was updated successfully, but these errors were encountered:
1. Read the FAQs 馃憞
Done.
2. Describe the bug
I use useMotionValue and useSpring to track the cursors position and animate a div to follow it, worked fine with the last v10 version. After upgrading to v11 I noticed two specific bugs.
If I click while moving my cursor the animated div will accelerate in the direction it was facing while the click happened. it is very easy to reproduce by spamming click while making circles with the cursor in the codeSandbox I provide below.
when I have dev tools open the animation is glitchy.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/framer-motion-cursor-lag-khssjf?file=%2Fsrc%2FApp.js%3A9%2C52
4. Steps to reproduce
Steps to reproduce the behavior:
5. Expected behavior
bug 1 - it should work like pre v11, clicking should not affect the movement/velocity of the element.
bug 2 - it should not be laggy with dev tools open.
6. Video or screenshots
CodeSandbox reproduction.
2024-04-08.00-00-04.mp4
and locally with a clean Next.js project.
2024-04-07.23-49-28.mp4
7. Environment details
Windows 11 Education 23H2.
Chrome Version 123.0.6312.106 (Official Build) (64-bit).
8. Extra question
In the docs it is mentioned that using motion values inside the style prop does not make use of hardware acceleration.
Is there a better way to implement the functionality I want? what would be the best way to track the cursors position and animate an element?
The text was updated successfully, but these errors were encountered: