[BUG] Spring animation following mouse pointer is laggy in versions >=10.2.4

[az33zy]

1. Read the FAQs 👇

2. Describe the bug

Animation of an object following mouse cursor is laggy in versions >=10.2.4.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Link to an official example.

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to package.json
2. Change version of framer-motion to 10.2.4 or latest
3. Refresh the preview window
4. Move the mouse pointer
5. See error

5. Expected behavior

Smooth animation like in version 10.2.3

6. Video or screenshots

Screen.Recording.2023-06-08.at.14.39.02.mov

7. Environment details

Google Chrome on macOS Version 113.0.5672.126 (Official Build) (arm64)

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[MrUltimate]

I think I'm seeing this too, all of a sudden my spring animations are behaving much differently and I've already spent hours tweaking the values

[jmilr]

Banging my head against a wall trying to figure out why this was suddenly so laggy in Framer Studio… Any ideas what's causing this? If there's now a better way to listen for mouse position or something?

Worth noting users in Framer (X? Studio?) don't have a choice of version afaik, so this is an issue impacting paying customers.

[Louise3Fraser]

I'm having this exact same issue. I was trying to animate a custom cursor similar to the example.

[chimpansiets]

Having the same issue unfortunately, I am on 10.12.20

[atsixian]

Same issue with the cursor movement

[nyzss]

same issue, moving background elements using mouse position but it's incredibly laggy on a good computer.

[MichalKurzewski]

i have upgraded from version 9.03 to 10.16.12 at first i didnt notice any different, but there were regressions like this. this is one of the examples:

const variants: Record<string, Variants> = {
    transformation: {
      animate: {
        x: x,
        y: y,
        scale: scale,
        rotate: rotation,
      },
    },
  };

simple x, y control with setX and setY is tremendous difference. its very laggy and jittery.
thats my project:
https://github.com/MichalKurzewski/framer-motion-tailwind-playground
for now ive returned to 9.0.3, but if you update it to latest and play with the controlled boxes from first page, youll see what i mean.

there is also one animation that changed directions completely and that is collapsible menu on narrow screen.

[mattgperry]

Dupe #2088