How make exit animation of modal just fade in NextUI

Question

I use NextUI to my project and I need to create such modal animation:

when enter: slide from right.
when exit: just smooth fade

My modal component:

"use client";

import useModal from "@/hooks/useModal";
import { cn } from "@nextui-org/react";
import { useEffect } from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  useDisclosure,
} from "@nextui-org/react";

const CreateChatModal = () => {
  const { type, isOpen, onClose } = useModal();

  const isModalOpen = isOpen && type === "createFolder";

  return (
    <Modal
      size="sm"
      isOpen={isModalOpen}
      onClose={onClose}
      backdrop="transparent"
      motionProps={{
        variants: {
          enter: {
            x: 0,
            opacity: 1,
            transition: {
              duration: 0.2,
              ease: "easeOut",
            },
          },
          exit: {
            x: 140,
            opacity: 0,
            transition:{
                duration: 0.1,
                
            }
          },
        },
      }}
    >
      <ModalContent className="rounded-lg">
        {(onClose) => <div className="h-20 ">text</div>}
      </ModalContent>
    </Modal>
  );
};

export default CreateChatModal;

the problem is on exit it slides back to right. NextUi have no docs about it only link to Motion framework(Idk what is that)

ps: if someone have time to explain what Motion is, I will be so glad