[Next.js] framer-motion을 사용한 페이지 이동 애니메이션

Next.js

 

 

framer-motion 애니메이션

 

 

NPM Install

> 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;

 

 

AnimatePresence 컴포넌트에 key를 넣어주어야 exit(언마운트할 때) 에니메이션 구현이 가능하다. 

 

 

framer-motion