search

framer / motion

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

[BUG] Scale anim ignores updates to svg element position #621

Open dominictwlee opened 4 years ago

dominictwlee commented 4 years ago

2. Describe the bug When animating the scale property of a circle element, I expect it to scale up and down at the element's last position. However, it seems if you set the cx/cy position of the element dynamically after the initial animation, the exit animation will shift itself back to the previous position rather than respect any changes made to cx/cy.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://codesandbox.io/s/framer-motion-playground-yqqjy?file=/src/index.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Click ToggleAnim button to trigger animation entrance, scaling from 0 to 1.
  2. click setCX button to shift cx position.
  3. click ToggleAnim button again, this time it'll scale from 1 to 0, but also shift back to it's previous position before setCX, rather than scale from 1 to 0 and the latest cx position.

5. Expected behavior I expect the scaling from 1 to 0 to happen at the last position after cx was changed dynamically.

6. Video or screenshots Peek 2020-07-07 22-20

7. Environment details Browser: Firefox 78.0.1 OS: Pop!_OS 20.04

dominictwlee commented 3 years ago

@InventingWithMonster Hi, just wanted to follow up on this to see whether this is intended behaviour, or whether it's a bug? I think it has to do with the transform-origin not updating according to any state changes to cx.

thanks!

mattgperry commented 2 years ago

Yeah this is a bug although I'm not sure when it'll get looked at