This project demonstrates how to implement stunning, Awwwards-inspired page transitions in a Next.js application using Framer Motion's AnimatePresence hook. It features three unique page transitions: Curve, Stairs, and Perspective (Inner), inspired by award-winning portfolios.
See the transitions in action! Check out the demo videos located in the demo/ directory:
Curve.webm: Showcases the smooth Curve transition.Stairs.webm: Demonstrates the elegant Stairs transition.Inner.webm: Highlights the dynamic Perspective transition.
You can find these videos at demo/Curve.webm, demo/Stairs.webm, and demo/Inner.webm.
This project draws inspiration from the following Awwwards-winning portfolios:
The project is organized as follows:
src/
├── components/
│ └── Layout/
│ ├── Curve/
│ │ ├── anim.js
│ │ ├── index.jsx
│ │ └── styles.scss
│ ├── Inner/
│ │ ├── anim.js
│ │ ├── index.jsx
│ │ └── styles.scss
│ └── Stairs/
│ ├── anim.js
│ ├── index.jsx
│ └── styles.scss
├── pages/
│ ├── about.js
│ ├── contact.js
│ ├── index.js
│ ├── _app.js
│ └── _document.js
└── styles/
├── globals.css
└── styles.scss
- components/Layout/: Contains the transition components (
Curve,Inner,Stairs), each with its own animation logic (anim.js), JSX structure (index.jsx), and styles (styles.scss). - pages/: Includes the main pages (
index.js,about.js,contact.js) where transitions are applied, along with Next.js configuration files (_app.js,_document.js). - styles/: Global CSS and SCSS files for styling the application.
- demo/: Contains demo videos showcasing each transition.
Follow these steps to set up and run the project locally.
- Node.js (version 16 or higher)
- npm, yarn, pnpm, or bun
-
Create a new Next.js project (if not already set up):
npx create-next-app@latest
Configuration options used for this project:
- Project name:
page-transitions - TypeScript: No
- ESLint: No
- Tailwind CSS: Yes
src/directory: Yes- App Router: Yes
- Turbopack: Yes
- Import alias:
@/*(default)
- Project name:
-
Clone or set up the project: If you have the project files, ensure the directory structure matches the one above. Otherwise, follow the tutorial code to implement the transitions.
-
Install dependencies: Navigate to the project directory and run:
npm install # or yarn install # or pnpm install # or bun install
-
Install Framer Motion: If not already installed, add Framer Motion to your project:
npm install framer-motion # or yarn add framer-motion # or pnpm add framer-motion # or bun add framer-motion
Start the development server with:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to view the application.
To switch between the Curve, Stairs, or Inner (Perspective) transitions, modify the wrapper component in the page files (pages/index.js, pages/about.js, pages/contact.js). By default, the Curve transition is applied.
To change the transition type, update the import and wrapper component in pages/about.js (or any other page file). Below is an example of how to switch between transitions:
import Curve from '@/components/Layout/Curve'; // Default transition
// import Inner from '@/components/Layout/Inner'; // Uncomment for Perspective transition
// import Stairs from '@/components/Layout/Stairs'; // Uncomment for Stairs transition
import Head from 'next/head';
export default function About() {
return (
<>
<Head>
<title>About Page</title>
</Head>
<Curve backgroundColor="#BCF366"> {/* Replace with Inner or Stairs to change transition */}
<h1>About</h1>
<div className="body">
You can change the page transition by wrapping the content with Curve, Inner, or Stairs components.
</div>
</Curve>
</>
);
}- Open the desired page file (
index.js,about.js, orcontact.js) in thepages/directory. - Update the import statement to use one of the following:
import Curve from '@/components/Layout/Curve';import Inner from '@/components/Layout/Inner';import Stairs from '@/components/Layout/Stairs';
- Replace the wrapper component (e.g.,
<Curve>,<Inner>, or<Stairs>) around the page content. - Save the file and refresh the browser to see the new transition.
- Ensure only one transition component is imported and used per page to avoid conflicts.
- The
backgroundColorprop (e.g.,#BCF366) can be customized to match your design. - The transitions rely on Framer Motion's
AnimatePresencefor smooth animations, which is configured in_app.js.
- Transitions not working? Ensure
AnimatePresenceis correctly set up inpages/_app.jsand that Framer Motion is installed. - Styles not applying? Verify that the SCSS files in
components/Layout/[Transition]/styles.scssandstyles/globals.cssare correctly imported. - Errors in the console? Check for missing dependencies or syntax errors in the
anim.jsorindex.jsxfiles.
Feel free to fork this repository, experiment with new transitions, or improve the existing ones. Pull requests are welcome!
This project is licensed under the MIT License.