Framer Motion 返回拖动按钮

Question

I have objects that can be moved using drag on framer motion. How can I make a button to return all elements to their initial position?

I tried to do it with animate, but the animation is sharp and ugly. I think this is because when you release the element, it still some time "floats" in space and after the animation continues to do so.

Answer 1

You can use the useTransform hook in Framer Motion. You can set the initial position of each element using the initial prop and then use the useTransform hook to update the position of each element based on the state of the button.

import React, { useState } from "react";
import { motion, useTransform } from "framer-motion";

const MyComponent = () => {
const [isReset, setIsReset] = useState(false);

const x = useTransform(isReset, [false, true], [0, 100]);
const y = useTransform(isReset, [false, true], [0, 100]);

return (
    <>
      <motion.div
        drag
        style={{ x, y }}
        transition={{ duration: 0.5, ease: "easeInOut" }}
      />
      <button onClick={() => setIsReset(true)}>Reset</button>
    </>
  );
};

export default MyComponent;