ReactJS framer motion reversed variant

In my code i got a button that changes a state from false to true using the useState hook , the change in state wll conditionally render a form and the form will appear in the screen with motion defined in a variant as shown below , but when i change the state to false using the button the form just disapear (because the state is false now) but i want an animation to be applied to the situation as will in reversed way , any advice how im able to do that? (i only showing the relevant parts of my code)

const FormVariant = {
  hidden: {
    x: "100vw",
  },
  visible: {
    x: "0",
    transition: {
      type: "spring",
      stiffness: "120",
    },
  },
};
 const [showForm, setShowForm] = useState(false);
{showForm && <form  variants={FormVariant} initial="hidden" animate="visible"/>}
<BookingButton onClick={() => setShowForm(!showForm)}>
          Book Here!!
        </BookingButton>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.