search

framer / motion

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

[BUG] It isn't possible to animate the `x` and `y` coordinates of an SVG element using `animate` #2596

Open ccapndave opened 1 month ago

ccapndave commented 1 month ago

1. Read the FAQs 👇

2. Describe the bug

It is not possible to animate the x and y coordinates of an SVG element using animate.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/testing-framer-motion-forked-xpwzg4?file=%2Fsrc%2FApp.js

4. Steps to reproduce

Attempt to animate the x and y properties of an SVG element directly, by using x and y on the element.

5. Expected behavior

The x and y attributes should animate to their new values.

MrUltimate commented 1 month ago

+1

@mattgperry I'm facing this issue as well. This seems to have broken with v11 since my old prod site on v10 is still working. Interestingly for me, the animation is only working on exit. Initial → Animate is not working.