next-app-router-transitions

v2.0.4

Published

2 months ago

Sleek and seamless page transitions for Next.js App Router - Elevate your app's UX with fluid navigation

Downloads

0High
0Medium
0Low

theogenejr

nextjs app router page transitions animation user experience react

Next App Router Transitions 🚀

Elevate your Next.js App Router projects with silky-smooth page transitions! This package provides an easy-to-use component that adds fluid animations between route changes, enhancing the overall user experience of your Next.js applications.

Features

🎭 Multiple transition effects (block, multiBlock, blinds)
🔧 Fully customizable (duration, ease, colors)
📱 Responsive and accessible
🧩 Seamless integration with Next.js App Router
🪶 Lightweight with minimal setup

Installation

npm install next-app-router-transitions framer-motion

Important: This package requires framer-motion as a peer dependency. Make sure to install it alongside the package.

Usage

To use Next App Router Transitions in your project, follow these steps:

Create a new client component in your app directory, e.g., app/TransitionLayout.tsx:

"use client";

import { TransitionWrapper } from "next-app-router-transitions";

export default function TransitionLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <TransitionWrapper
      transitionType="block"
      duration={0.5}
      backgroundColor="#000">
      {children}
    </TransitionWrapper>
  );
}

Use this component in your root layout (app/layout.tsx):

import TransitionLayout from "./TransitionLayout";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TransitionLayout>{children}</TransitionLayout>
      </body>
    </html>
  );
}

This setup ensures that the transition effects are applied consistently across your entire application.

API

The TransitionWrapper component accepts the following props:

| Prop | Type | Default | Description | | --------------- | ------------------ | ----------- | ----------------------------------------------------------- | | transitionType | string | 'block' | Type of transition effect ('block', 'multiBlock', 'blinds') | | duration | number | 0.75 | Duration of the transition in seconds | | backgroundColor | string | 'black' | Background color of the transition element | | ease | string | number[] | 'easeInOut' | Easing function for the transition | | zIndex | number | 50 | z-index of the transition element |

Examples

Block Transition

<TransitionWrapper transitionType="block" duration={0.5} backgroundColor="#000">
  {children}
</TransitionWrapper>

MultiBlock Transition

<TransitionWrapper
  transitionType="multiBlock"
  duration={0.7}
  backgroundColor="#fff">
  {children}
</TransitionWrapper>

Blinds Transition

<TransitionWrapper
  transitionType="blinds"
  duration={0.6}
  backgroundColor="#333">
  {children}
</TransitionWrapper>

Troubleshooting

If you encounter any issues, ensure that:

You have installed framer-motion as a peer dependency.
You're using the TransitionWrapper in a client component (with the "use client" directive).
The TransitionWrapper is placed as high as possible in your component tree, ideally in the root layout.
You have the correct peer dependencies installed (react, react-dom, next, framer-motion).

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

Happy coding! If you enjoy smooth transitions in your Next.js App Router projects, don't forget to give us a star on GitHub! ⭐