CODEWITHSUNDEEP
next.jsframer-motion
some_dev
some_dev

Reputation: 201

NextJS - Framer-Motion page transition doesn't fire

for some reason my NextJS page transition with framer-motion doesn't seem to work. I followed many tutorials and did a lot of research and it still doesn't work. Here's my _app.tsx code.

import '../styles/globals.css'
import '../styles/ui.css'
import '../fonts/define.css'
import { AppProps } from 'next/app'
import Layout from '../layouts/dashboard'
import Sidebar from '../components/Sidebar'
import { AnimatePresence, motion } from 'framer-motion'

const App = ({ Component, pageProps }: AppProps) => {
  return <main>
      <Sidebar/>
      <AnimatePresence>
        <motion.div initial={{opacity: 0}} animate={{opacity: 1}} exit={{opacity: 0}} className="content">
          <Component {...pageProps} />
        </motion.div>
      </AnimatePresence>
    </main>
}

export default App

When I switch between routes the transition just doesn't fire. It only fades in on initial load, then opacity: 1 style is applied to .content div and that's it.

Thank you for your help!

Upvotes: 1

Views: 4472

Answers (1)

some_dev
some_dev

Reputation: 201

I figured it out. I needed to add key attribute to the <motion.div> div. Read more here https://www.framer.com/docs/animate-presence/#unmount-animations

Upvotes: 5

Related Questions