Demo

https://nextjs-page-transitions-web.vercel.app/

NextJS Page Transitions

nextjs-page-transitions is an npm package designed to help you add smooth and dynamic transitions between pages in your Next.js applications. Built on top of the Next.js framework, this package allows you to easily create engaging page transitions that keep your users engaged and enhance their browsing experience. With nextjs-page-transitions, you can choose from a variety of transition effects, including fade, slide, scale, and more, and customize the animation duration and easing function to fit your specific needs. The package also includes support for page-level transitions, allowing you to animate individual elements as they enter or exit the page. Whether you're building a blog, an e-commerce site, or a complex web application, nextjs-page-transitions can help you take your user interface to the next level. So why wait? Download nextjs-page-transitions today and start creating stunning page transitions for your Next.js projects!

Installation

Install with npm

  npm install nextjs-page-transitions

Usage/Examples

// 📂 pages/_app.js

import React from 'react'
import NextjsTransition from 'nextjs-page-transitions'
import { useRouter } from 'next/router'


export default function App({ Component, pageProps }) {
  
  const router = useRouter()
    
    return (
        <div key={router.route}> // its important to wrap this NextjsTransition with this div passing key router.route
          <NextjsTransition>
              <Component {...pageProps} />
          </NextjsTransition>
        </div>
    )
}              

Slider props

  <NextjsTransition
    animation="default"
    duration={0.5}
    isCustom={false}
    customAnimation={{
        initialState: {
            opacity: 0, // Initial state
        },    
        animateState: {
            opacity: 1, // Page animation
        },
        exitState: {
            // If you want an exit animation, code here.
        },
    }}
  >
    ...
  </NextjsTransition>

| Prop | Type | Default | Description | | :-------- | :------- | :------- | :-------------------------------- | | animation | string | default | Options: ["default", "fade", "flip", "scale", "curtain", "circle"] | | duration | number | 0.3 | The speed with which it moves (in seconds) | | isCustom | boolean | false | If you want to pass custom animation | | customAnimation | object | null | Custom animation object ( look up ) |