components/animate/card.tsx

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

export const Card = ({ children, drag, index, setIndex, front }: any) => {
  const [exitX, setExitX] = useState(0);

  const x = useMotionValue(0);
  const scale = useTransform(x, [-150, 0, 150], [0.5, 1, 0.5]);
  const rotate = useTransform(x, [-150, 0, 150], [-45, 0, 45], {
    clamp: false,
  });

  const variantsFrontCard = {
    animate: { scale: 1, y: 0, opacity: 1 },
    exit: (custom: number) => ({
      x: custom,
      opacity: 0,
      scale: 0.5,
      transition: { duration: 0.2 },
    }),
  };
  const variantsBackCard = {
    initial: { scale: 0, y: 105, opacity: 0 },
    animate: { scale: 0.75, y: 30, opacity: 0 },
  };

  function handleDragEnd(_: any, info: any) {
    if (info.offset.x < -100) {
      setExitX(-250);
      setIndex(index + 1);
    }
    if (info.offset.x > 100) {
      setExitX(250);
      setIndex(index + 1);
    }
  }

  return (
    <motion.div
      style={{
        position: "absolute",
        width: "100%",
        height: "100%",
        top: 0,
        x,
        rotate,
      }}
      variants={front ? variantsFrontCard : variantsBackCard}
      initial="initial"
      animate="animate"
      exit="exit"
      custom={exitX}
      transition={
        front
          ? { type: "spring", stiffness: 300, damping: 20 }
          : { scale: { duration: 0.2 }, opacity: { duration: 0.4 } }
      }
    >
      {children}
    </motion.div>
  );
};