search

framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
23.68k stars 799 forks source link

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

Open rick-hup opened 1 week ago

rick-hup commented 1 week ago

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

ffdead commented 3 days ago

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