Hi everyone, I've found a bunch of articles and videos that show a simple method of adding animation on entering a page. I've tried to do the same thing, but it only works for me on page refresh and not when I navigate between pages. The method is to basically install framer-motion, and then add a file called "template.tsx" that includes the following code:

"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>
  )
}

Here's the article that describes it if anyone is wondering. https://stackademic.com/blog/next-js-13-framer-motion-page-transitions