3e178bb801
## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Steven <steven@ceriously.com> |
||
|---|---|---|
| .. | ||
| components | ||
| pages | ||
| .gitignore | ||
| constants.js | ||
| package.json | ||
| README.md | ||
framer-motion example
Framer Motion is a production-ready animation library. By using a custom <App> along with Motion's AnimatePresence component, transitions between Next pages becomes simple and declarative.
When using Next's <Link> component, you will likely want to disable the default scroll behavior for a more seamless navigation experience. Scrolling to the top of a page can be re-enabled by adding a onExitComplete callback on the AnimatePresence component.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-framer-motion with-framer-motion-app
# or
yarn create next-app --example with-framer-motion with-framer-motion-app
# or
pnpm create next-app -- --example with-framer-motion with-framer-motion-app
Deploy it to the cloud with Vercel (Documentation).