onClick with Motion And Chakra

[wicka-aus]

Hi

I want to create a component that when you click on it it moves to the right, click again and it returns to its initial position.

I can get it to work if I use <motion.div> but if I use MotionBox (as below) it slides right then on second click jumps back it's initial position, not slides. Assume due to a re-render.

How do I solve this?

TIA

import { Box, forwardRef } from "@chakra-ui/react"
import { motion } from "framer-motion"

export default function Home() {
  
    const MotionBox = motion(Box)

    const [ toggleDirection, setToggleDirection ] = useState(0)

    const onToggle = ()=>{
      setToggleDirection( toggleDirection === 0 ? 20 : 0 )
    }

    return (
      <MotionBox
        mb='.75rem'
        animate={{ x : toggleDirection }}
        onTap ={onToggle}
      >
        Move
      </MotionBox>
    )

}

[kelilipan]

Your code doesn't work because you trying to animate x:0 (the initial position of MotionBox) to -> x:0 (same position).
It only works if your target is different from initial value.
(Please CMIIW)

You can use variants to modify your initial value(so framer will trigger animation)
and change variant based on your state

export default function Home() {
  const MotionBox = motion(Box);
  const [isActive, setActive] = useState(false);
  const active = {
    initial: {
      x: 20
    },
    animate: {
      x: 0
    }
  };
  const inactive = {
    initial: {
      x: 0
    },
    animate: {
      x: 20
    }
  };
  return (
    <MotionBox
      h="50px"
      w="150px"
      bgColor="red"
      mb=".75rem"
      initial="initial"
      animate="animate"
      variants={isActive ? active : inactive}
      onClick={() => {
        setActive(!isActive);
      }}
    >
      Move
    </MotionBox>
  );
}

https://codesandbox.io/s/zen-drake-5c196?file=/pages/index.jsx