BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move animation presence to app level rather than layout

Browse source
This commit is contained in:
3zachm 2022-12-24 15:35:35 -08:00
parent f78232f3c2
commit 968d93a1ba
3 changed files with 23 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/DashLayout.tsx
View file

@ -18,7 +18,13 @@ function DashLayout(props: DashLayoutProps) {
// get the current route for animation purposes
const router = useRouter();
return (
<>
<m.div
className="bg-gradient-to-t from-zinc-900 to-[#202737b6]"
initial="initial"
animate="animate"
exit="exit"
variants={containerVariants}
>
<Head>
<title>Dashboard - InvestBot</title>
<meta name="description" content="Dashboard statistics for InvestBot" />
@ -57,7 +63,7 @@ function DashLayout(props: DashLayoutProps) {
</AnimatePresence>
</LazyMotion>
</div>
</>
</m.div>
);
}

9
layouts/HomeLayout.tsx
View file

@ -23,7 +23,12 @@ function HomeLayout(props: HomeLayoutProps) {
// get the current route for animation purposes
const router = useRouter();
return (
<>
<m.div
initial="initial"
animate="animate"
exit="exit"
variants={containerVariants}
>
<Head>
<title>InvestBot</title>
<meta name="description" content="Serving anny's community est. 2022" />
@ -59,7 +64,7 @@ function HomeLayout(props: HomeLayoutProps) {
</m.div>
</AnimatePresence>
</LazyMotion>
</>
</m.div>
);
}

9
pages/_app.tsx
View file

@ -2,6 +2,7 @@ import "../styles/globals.css";
import type { ReactElement, ReactNode } from "react";
import type { NextPage } from "next";
import type { AppProps } from "next/app";
import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode;
@ -15,5 +16,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page);
return getLayout(<Component {...pageProps} />);
return (
<LazyMotion features={domAnimation}>
<AnimatePresence mode="wait" initial={false}>
{getLayout(<Component {...pageProps} />)}
</AnimatePresence>
</LazyMotion>
);
}