Next.js Discord

Discord Forum

framer-motion animation only works on page refresh and not on page navigation

Unanswered
Minskin posted this in #help-forum
Open in Discord
MinskinOP
Hi everyone! I followed this youtube tutorial on how to add page transitions. Problem is that for me the result only works on page refresh, and not on page navigation/transition like in the video. I followed all the steps in the tutorial, not sure what to do.
https://www.youtube.com/watch?v=jVU3JD6qOBo

3 Replies

MinskinOP
here is my template.tsx:
'use client'

import { motion } from 'framer-motion'

export default function Template({ children }: {children: React.ReactNode}) {
    return (
        <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.5 }}
        >
            {children}
        </motion.div>
    )
}
and here is my layout.tsx:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "./Component/Header";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Mateusz Salaga's Portfolio",
  description: "Mateusz Salaga's Portfolio",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header/>
          {children}
      </body>
    </html>
  );
}
MinskinOP
I found a blog that follows the same steps as the video, it seems to work for other people but not me, what could I be doimg wrong?