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>