Page Transitions

import { AnimatePresence, motion } from 'framer-motion';

<AnimatePresence mode="wait">
  <motion.div
    key={activeTab}              // เปลี่ยน key = trigger animation
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0, y: -20 }}
    transition={{ duration: 0.3 }}
  >
    {content}
  </motion.div>
</AnimatePresence>

// mode="wait"    — exit จบก่อน → ค่อย enter (สะอาด)
// mode="sync"    — exit + enter พร้อมกัน (default)
// mode="popLayout" — exit + enter พร้อมกัน แต่ layout ไม่กระโดด

<AnimatePresence mode="wait">
  <motion.div key={currentPage}>
    {pageContent}
  </motion.div>
</AnimatePresence>

const fadeSlide: Variants = {
  hidden: { opacity: 0, x: 30 },
  show: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: -30 },
};

<AnimatePresence mode="wait">
  <motion.div
    key={step}
    variants={fadeSlide}
    initial="hidden"
    animate="show"
    exit="exit"
  >
    <StepContent step={step} />
  </motion.div>
</AnimatePresence>