I've been playing with the new framer motion library to try to move an svg circle to a new position. It will be from position relative to position fixed so I can't just transform the circle and so was hoping to instead use AnimateSharedLayout.
It is somewhat working but the animation seems to move in a weird path. The animation moves at the right angle but appears like it is coming from outside the svg, rather than it's original position. I have set up an example here:
https://codesandbox.io/s/interesting-margulis-7ovme
Am I doing something wrong or is this just because AnimateSharedLayout is still in beta? Because it moves at the right angle it feels like it should work, but that maybe I am just missing some other attributes/properties that need to be set so it starts from the right position.
Any suggestions on how to fix this or whether it is just a bug would be much appreciated. Thanks!
I raised an issue in Framer Motion Github and it does indeed appear to be a bug that they hope to resolve soon.
The bug progress can be tracked here: https://github.com/framer/motion/issues/605