[Bug] Animation does not work very well whe driven by `watch` in a vue application

[thomasaull]

1. Describe the bug

I'm using motion one in a Vue project where I want to do the following:

• A gsap timeline drives the animation of a value
• I pass the value to a component as a prop
• The value should drive a motion one animation

When I'm trying to call the animate() function in a Vue watcher with requestAnimationFrame it does not work (Example 1 in Codesandbox). If instead use a requestAnimationFrame loop it does (Example 2 in Codesandbox). Please comment in/out the code accordingly.

2. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/confident-mendeleev-pvgqmc?file=/src/components/Animation.vue

3. Steps to reproduce

Steps to reproduce the behavior:

1. Open Codesandbox Link
2. Example does not work
3. Comment out Example 1 and comment in Example 2
4. Example does work

4. Expected behavior

I'm not sure if its a limitation of the library or if I'm doing something wrong. My expectation would be that I can drive the animation with the watcher. This for example works as expected when using gsap: https://codesandbox.io/s/charming-easley-4gw4gp?file=/src/components/Animation.vue

[mattgperry]

Is there a reason why you try and animate these values in both situations rather than just setting them via style

element.style.setProperty("--motion-x") = props.x + "px"

Likewise these sandboxes aren't equivalent. Here's one mixing rAF with GSAP and it also stutters for me https://codesandbox.io/s/elastic-shtern-5n62vy?file=/src/components/Animation.vue

[thomasaull]

@mattgperry Yeah you're right, the second sandbox didn't use rAF, my bad. I believe, I did that because gsap uses requestAnimationFrame internally anyway.

However with your sandbox example at least some kind of motion is happening:
https://github.com/motiondivision/motionone/assets/227756/73a8ad0d-b379-4fcb-b159-852970b65afa

Whereas with the first sandbox from my initial post , there's no motion at all:
https://github.com/motiondivision/motionone/assets/227756/9c064e16-b72b-4161-a84c-27569f0f1a40

The video screencasts are recorded with Firefox 117 — I just noticed that it works totally fine in Chrome 🤷 Now it's just the question if it's a bug in the Browser or in Motion or Vue? 😅

The reason why I'm using animate instead of setting the values directly is that I want to have some drag, think of a element following the cursor, similar to your example in this issue: #43 (comment)