[nextjs/framer] framer를 이용한 nextjs에서 애니메이션 적용

[nextjs/framer] framer를 이용한 nextjs에서 애니메이션 적용

 

https://www.framer.com/

Framer — The internet is your canvas

 

https://stackademic.com/blog/next-js-13-framer-motion-page-transitions

Next.js 13 + Framer Motion Page Transitions

 

#framer-motion 설치

npm install framer-motion

 

#app/template.tsx

"use client"
import { motion } from "framer-motion"

const variants = {
hidden: { opacity: 0, x: -200, y: 0 },
enter: { opacity: 1, x: 0, y: 0 },
}

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <motion.main
      variants={variants}
      initial="hidden"
      animate="enter"
      transition={{ type: "linear" }}
    >
      {children}
    </motion.main>
  )
}

 

#motion #framer #tsx #typescript #nextjs