Skip to content

Latest commit

 

History

History
55 lines (35 loc) · 1.29 KB

README.md

File metadata and controls

55 lines (35 loc) · 1.29 KB
Raw

@gimwa/next-page-transition

Description

A page transition component for Next.js in appdir mode, using framer-motion for animation support.

Demo

codesandbox

Installation

npm install @gimwa/next-page-transition

Usage

import NextPageTransition from '@gimwa/next-page-transition';

// Your component here

Features

  • Smooth page transitions for Next.js applications.
  • Built-in support for framer-motion animations.
  • Only test works well in appdir mode.

API

Props

  • initial: The initial animation state. Default is { opacity: 0 }.
  • animate: The state that the component should animate to. Default is { opacity: 1 }.
  • exit: The state to animate to when the component is exiting. Default is { opacity: 0 }.

Example

import NextPageTransition from '@gimwa/next-page-transition';

// In your component
<NextPageTransition initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
  {/* Your page content here */}
</NextPageTransition>

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT