[SOLVED] Framer Motion Using Animate Function To Move Object

Framer Motion Using Animate Function To Move Object

I am currently trying to use the Framer Motion library to move an object when clicking it. I want to be able to move a component to a specific location and it doesn't matter where the start position is. I'm lost how to approach this problem.

Currently, I tried the animate() function according to the documentation. But I only see how they move the component by directly changing x and y position such as animate(scope.current, {x:20, y:-20}.

Any help would be appreciated.

Solution

Update:

The issue was that I was trying to move a React component that contains a Framer Motion tag from one React component to another. Instead of using animate(), add the prop layoutId to the Framer motion tag, for example <motion.img layoutId={...}/>. Framer Motion should detect this on its on and move the component from one to another.