motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] animate() doesn't transition from the initial transform state of element

Open rick-hup opened this issue 1 year ago • 1 comments

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

  1. Create a DOM element with an initial transform of scale(0.1)
  2. 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

rick-hup avatar Oct 04 '24 02:10 rick-hup

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

ffdead avatar Oct 13 '24 12:10 ffdead

I have same issue 😭

auduongtuan avatar Dec 24 '24 06:12 auduongtuan

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.

bakura10 avatar Dec 29 '24 05:12 bakura10