JSPM

@gimwa/next-page-transition

1.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q32341F
  • License MIT

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

Package Exports

  • @gimwa/next-page-transition
  • @gimwa/next-page-transition/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gimwa/next-page-transition) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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