├── .eslintrc.json ├── .gitignore ├── README.md ├── app ├── about │ └── page.jsx ├── contact │ └── page.jsx ├── globals.css ├── head.js ├── layout.js ├── navbar.jsx ├── page-wrapper.jsx ├── page.jsx └── products │ └── page.jsx ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── vercel.svg ├── styles └── globals.css └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | # next13-page-transition 36 | -------------------------------------------------------------------------------- /app/about/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion } from "framer-motion"; 4 | import { Navbar } from "./../navbar"; 5 | import { PageWrapper } from "./../page-wrapper"; 6 | 7 | const variants = { 8 | hidden: { opacity: 0 }, 9 | show: { 10 | opacity: 1, 11 | transition: { 12 | staggerChildren: 0.3, 13 | }, 14 | }, 15 | }; 16 | 17 | const images = { 18 | hidden: { 19 | opacity: 0, 20 | x: 30, 21 | }, 22 | show: { 23 | opacity: 1, 24 | x: 0, 25 | transition: { 26 | duration: 1 27 | }, 28 | }, 29 | }; 30 | 31 | export default function Aboutpage() { 32 | return ( 33 |
34 |

35 | 36 | 37 |
38 |
39 |
40 |

41 | Technical Specifications 42 |

43 |

44 | The walnut wood card tray is precision milled to perfectly fit 45 | a stack of Focus cards. The powder coated steel divider 46 | separates active cards from new ones, or can be used to 47 | archive important task lists. 48 |

49 | 50 |
51 |
52 |
Origin
53 |
54 | Designed by Good Goods, Inc. 55 |
56 |
57 | 58 |
59 |
Material
60 |
61 | Solid walnut base with rare earth magnets and powder 62 | coated steel card cover 63 |
64 |
65 | 66 |
67 |
Dimensions
68 |
69 | 6.25" x 3.55" x 1.15" 70 |
71 |
72 | 73 |
74 |
Finish
75 |
76 | Hand sanded and finished with natural oil 77 |
78 |
79 | 80 |
81 |
Includes
82 |
83 | Wood card tray and 3 refill packs 84 |
85 |
86 | 87 |
88 |
Considerations
89 |
90 | Made from natural materials. Grain and color vary with 91 | each item. 92 |
93 |
94 |
95 |
96 | 101 | 107 | 113 | 119 | 125 | 126 |
127 |
128 | 129 |

130 |
131 | ); 132 | } 133 | -------------------------------------------------------------------------------- /app/contact/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion } from "framer-motion"; 4 | import { Navbar } from "./../navbar"; 5 | import { PageWrapper } from "./../page-wrapper"; 6 | 7 | export default function Contactpage() { 8 | return ( 9 |
10 |

11 | 12 | 13 |
14 |
15 |
16 | 21 | {/* yoyo: Infinity for infinite animation loop */} 22 | 30 |
31 |
32 |

33 | Knausgaard typewriter readymade marfa 34 |

35 |

36 | Chillwave portland ugh, knausgaard fam polaroid iPhone. Man 37 | braid swag typewriter affogato, hella selvage wolf narwhal 38 | dreamcatcher. 39 |

40 |
41 |
42 | 48 | 55 |
56 | 59 |
60 |

61 | Neutra shabby chic ramps, viral fixie. 62 |

63 |
64 | 78 | 95 |
96 |
97 |
98 |
99 | 100 |

101 |
102 | ); 103 | } 104 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /app/head.js: -------------------------------------------------------------------------------- 1 | export default function Head() { 2 | return ( 3 | <> 4 | Next13, Page transition 5 | 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /app/layout.js: -------------------------------------------------------------------------------- 1 | import './globals.css'; 2 | 3 | export default function RootLayout({ children }) { 4 | return ( 5 | 6 | 7 | {children} 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /app/navbar.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import Link from "next/link"; 4 | import { motion } from "framer-motion"; 5 | import { usePathname } from "next/navigation"; 6 | 7 | const links = [ 8 | { href: "/about", text: "About" }, 9 | { href: "/products", text: "Products" }, 10 | { href: "/contact", text: "Contact" }, 11 | ]; 12 | 13 | export const Navbar = () => { 14 | const path = usePathname(); 15 | return ( 16 |
17 | 35 |
36 | ); 37 | }; 38 | -------------------------------------------------------------------------------- /app/page-wrapper.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | 5 | export const PageWrapper = ({ children }) => ( 6 | <> 7 | 8 | 14 | {children} 15 | 16 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /app/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { PageWrapper } from "./page-wrapper"; 4 | import { Navbar } from "./navbar"; 5 | 6 | export default function Page() { 7 | return ( 8 | <> 9 | 10 | 11 |
12 |

Next.js with Framer-motion

13 |
14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /app/products/page.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion } from "framer-motion"; 4 | import { Navbar } from "./../navbar"; 5 | import { PageWrapper } from "./../page-wrapper"; 6 | 7 | const variants = { 8 | hidden: { opacity: 0 }, 9 | show: { 10 | opacity: 1, 11 | transition: { 12 | staggerChildren: 0.3, 13 | }, 14 | }, 15 | }; 16 | 17 | const images = { 18 | hidden: { 19 | opacity: 0, 20 | y: 30, 21 | }, 22 | show: { 23 | opacity: 1, 24 | y: 0, 25 | transition: { 26 | duration: 1, 27 | }, 28 | }, 29 | }; 30 | 31 | export default function Productpage() { 32 | return ( 33 |
34 |

35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 | 43 | All New 44 | 45 |

46 | All Products 47 |

48 |

49 | There are many variations of passages of Lorem Ipsum 50 | available but the majority have suffered alteration in 51 | some form. 52 |

53 |
54 |
55 |
56 |
57 | 63 | 64 |
65 | Front of men's Basic Tee in black. 70 |
71 |
72 |
73 |

74 | 75 | 79 | Basic Tee 80 | 81 |

82 |

Black

83 |
84 |

$35

85 |
86 | 87 | 88 | 89 |
90 | Front of men's Basic Tee in black. 95 |
96 |
97 |
98 |

99 | 100 | 104 | Basic Tee 105 | 106 |

107 |

Black

108 |
109 |

$35

110 |
111 | 112 | 113 | 114 |
115 | Front of men's Basic Tee in black. 120 |
121 |
122 |
123 |

124 | 125 | 129 | Basic Tee 130 | 131 |

132 |

Black

133 |
134 |

$35

135 |
136 | 137 | 138 | 139 |
140 | Front of men's Basic Tee in black. 145 |
146 |
147 |
148 |

149 | 150 | 154 | Basic Tee 155 | 156 |

157 |

Black

158 |
159 |

$35

160 |
161 | 162 | 163 | 164 |
165 | Front of men's Basic Tee in black. 170 |
171 |
172 |
173 |

174 | 175 | 179 | Basic Tee 180 | 181 |

182 |

Black

183 |
184 |

$35

185 |
186 | 187 | 188 |
189 | 190 |

191 |
192 | ); 193 | } 194 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | experimental: { 5 | appDir: true, 6 | }, 7 | }; 8 | 9 | module.exports = nextConfig; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next13-page-transition", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "autoprefixer": "^10.4.13", 13 | "eslint": "8.28.0", 14 | "eslint-config-next": "13.0.5", 15 | "framer-motion": "^7.6.12", 16 | "next": "13.0.5", 17 | "postcss": "^8.4.19", 18 | "react": "18.2.0", 19 | "react-dom": "18.2.0", 20 | "tailwindcss": "^3.2.4" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/isNan909/next13-page-transition/db5609fecc6f2ec1d03235ad8f6a2aadd180434a/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | nav.navbar > ul, nav.navbar > ul li{ 2 | display: flex; 3 | padding: 10px 20px; 4 | align-items: center; 5 | background-color: #000; 6 | color: #ffffff; 7 | justify-content: center; 8 | } 9 | 10 | .navbar li a { 11 | color: #ffffff; 12 | } -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory. 5 | "./pages/**/*.{js,ts,jsx,tsx}", 6 | "./components/**/*.{js,ts,jsx,tsx}", 7 | ], 8 | theme: { 9 | extend: {}, 10 | }, 11 | plugins: [], 12 | } --------------------------------------------------------------------------------