[BUG] Animate mini cannot animate CSS properties (even registered ones)

[bakura10]

Hi,

When trying to animate a CSS property (even a registered one), this won't work: https://codesandbox.io/p/sandbox/motion-11-spring-forked-jx7c6t?file=%2Findex.js%3A9%2C17&workspaceId=ws_2ajUMWBiBa7sDb8MJCFnBo

The issue is that on the final state, Motion adds extra '--':

[bakura10]

@mattgperry I'm not 100% confident on Motion internals but it seems the issue is coming from here:

motion/packages/framer-motion/src/animation/animators/waapi/utils/style.ts

Line 11 in b80699d

element.style.setProperty(`--${name}`, value as string)

The name is already qualified with the --, so this just doubles it.

EDIT: I tried to copy this repo and apply a fix myself, but I was completely unable to install the dependencies of Motion. Doing a npm install failed :(. The list of dependencies being huge I just could not understand how to install all the dependencies properly for this project. As the fix does not seems complex I will leave it to someone else who managed to install this repo.