[BUG] Animation lag after updating from v10x to 11x

[rnnyrk]

1. Read the FAQs 👇

2. Describe the bug

After updating to the latest framer motion the mask animation on mouse position is super laggy

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/devbox/framer-motion-animation-lag-g4nw4d

4. Steps to reproduce

Steps to reproduce the behavior:

1. Clone this repository https://github.com/olivierlarose/cursor-hover-mask/tree/main
2. Install with included dependencies
3. Animation works fine
4. Update to latest Framer Motion version
5. Start project
6. Animation is super laggy

5. Expected behavior

Expect the animation to be smooth, as in v10

6. Video or screenshots

Bad behaviour v10
https://github.com/framer/motion/assets/4519142/991827e3-d109-47ee-90c5-53e8a211ddcb

Bad behaviour v11
https://github.com/framer/motion/assets/4519142/36038fb3-126c-49e9-8c03-28e9f46d3ee0

[erengy]

I'm having the same issue after updating from 11.0.8 to 11.0.18.

Looks like it was introduced in 11.0.11, since reverting to 11.0.10 works for me. Might be related to #2448.

[rnnyrk]

Can confirm I get the expected behaviour with 11.0.10 indeed @erengy

[mattgperry]

@rnnyrk Can you make the sandbox public please?

[rnnyrk]

@mattgperry Sorry wasn't aware it was private. Changed it and should be public now

[mattgperry]

Thanks!

[mattgperry]

Ah yeah I'll have to take a look. Preferably what you'd do here is something with motion values and avoid rerendering. But although not the most performant way to do this, it should still work visually. It's happening because we now defer resolving keyframes until the next animation frame. I'll have to have a play and figure out what to do in these situations, maybe an opt-out or something.

[jakezubry]

The same issue:
Demo with a new version is laggy
Demo with 10.14 version is more stable
Also, if I just change the transition duration to 0, it updates everything without delays. Hope it helps

[quentinlagache]

Ah yeah I'll have to take a look. Preferably what you'd do here is something with motion values and avoid rerendering. But although not the most performant way to do this, it should still work visually. It's happening because we now defer resolving keyframes until the next animation frame. I'll have to have a play and figure out what to do in these situations, maybe an opt-out or something.

Any update on this topic @mattgperry ?