import { motion, AnimatePresence } from "framer-motion"
function AnimateRoutes({ children }){
    const variants = {
        initial: { opacity: 0, x: 100 },
        enter: { opacity: 1, x: 0, transition: { duration: 0.8 } },
        exit: { opacity: 0, x: -100 },
    }
    return(
        <AnimatePresence>
            <motion.div initial="initial" animate="enter" exit="exit" variants={variants}>
                {children}
            </motion.div>
        </AnimatePresence>
    )
}

export default AnimateRoutes