Next.js Discord

Discord Forum

Page exit animation with motion (framer)

Unanswered
Northern snakehead posted this in #help-forum
Open in Discord
Original message was deleted.

6 Replies

Northern snakehead
Heres my Page as well 
"use client";
import Project from "@/components/Project";
import projectData from "@/utils/projectData.json";
import AnimText from "@/components/AnimText";
import NavBar from "@/components/NavBar";

export default function ProjectsPage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <NavBar />
      <h1 className="text-4xl md:text-6xl lg:text-8xl text-center">
        <AnimText text="PROJECTS" offset={0.55} />
      </h1>
      <div className="mt-10 w-full max-w-4xl">
        {projectData.map((project, index) => (
          <Project key={project.id} project={project} index={index} />
        ))}
      </div>
    </main>
  );
}
should the page not be waiting on exit and fading out? im a little confused
Northern snakehead
im realizing now that next app router is internal and different from the og page router
any help navigating this is still appreciated
Northern snakehead
for example why wouldt something like this: 
"use client";

import { usePathname } from "next/navigation";
import { AnimatePresence, motion } from "framer-motion";
// import type { Metadata } from 'next';
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const pathname = usePathname();

  return (
    <html lang="en">
      <body className={`${inter.variable} antialiased`}>
        <AnimatePresence mode="wait" initial={false}>
          <motion.div
            key={pathname}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            transition={{ duration: 0.3 }}
          >
            {children}
          </motion.div>
        </AnimatePresence>
      </body>
    </html>
  );
}
behave like vanilla react router doms version of this 
    <AnimatePresence mode="wait">
      {/* Enables exit animations */}
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Loader />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/products" element={<Products />} />
        <Route path="/services" element={<Services />} />
        <Route path="/spaAdminServices" element={<Admin />} />
        <Route path="/careers" element={<Careers />} />
        <Route path="/careers/:id" element={<JobDetail />} />
        <Route path="/policies" element={<Polcies />} />
      </Routes>
    </AnimatePresence>