[BUG] animate() doesn't transition from the initial transform state of element
1. Read the FAQs 👇
2. Describe the bug
When using the animate() function, it appears to ignore the initial transform state of the element.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/33k8r2
4. Steps to reproduce
- Create a DOM element with an initial transform of
scale(0.1) - Use
animate(dom, {scale: 1.5})to attempt animation
5. Expected behavior
The element should transition from scale(0.1) to scale(1.5)
6. Video or screenshots
7. Environment details
chrome: 129.0.6668.89
Similar problems seems to happen when animating objects - it doesn't seem to pick up the proper start value.
I'm trying to animate the position of a Threejs object using animate - but the object will also be moved using scroll events. When the animation starts, it uses the last animated "to" value as the starting point, instead of the current scroll position.
Happy to provide a test case if needed.
Edit: it works fine when using a motion value that is updated on scroll - but not when animating the threejs object directly
I have same issue 😭
I am trying to migrate from version 10 to 11 and I am having a similar issue. In the version 10, Motion did support passing a null value, which was "take the current value". This no longer seems to work under the new version.