[Next] 화면전환 애니메이션

본 게시물은 framer-motion 을 이용한 화면전환 애니메이션을 기록 합니다.

> npm i framer-motion

예시

import { motion, AnimatePresence } from "framer-motion"
import { useRouter } from "next/router"


const component = ({children}) => {

    const router = useRouter();

    return(
    <>
        <WrapStyled>
            <AnimatePresence exitBeforeEnter>
                <motion.div key={router.route} initial={animate.initial}
                                               animate={animate.animate} 
                                               exit={animate.exit} >
                    {children}
                </motion.div>
            </AnimatePresence>
        </WrapStyled>
    </>
    )
}

const WrapStyled = styled.div`
    position: relative;
    max-width: 978px;
    padding: 0 0 30px 0;`

const animate = {
    initial :{ 
        transform : `translateY(50px)`,
        opacity : 0,
        transition: `transform 0.33s ease`
    },
    animate : {
        transform : `translateY(0px)`,
        opacity: 1,
        transition: `transform 0.33s ease`
    },
    exit : {
        transform : `translateY(50px)`,
        opacity: 0,
        transition: `transform 0.33s ease`
    }
}

export default component;

실제 적용 코드