61a9cfb317
* Add example for Framer Motion * Prevent scroll on route change * Replace hook with more robust useId hook * Improve scroll behavior * Remove custom hook in favor of gitInitialProps * Update framer-motion, react * Update readme * Fix lint errors |
||
---|---|---|
.. | ||
components | ||
pages | ||
constants.js | ||
package.json | ||
README.md |
framer-motion example
How to use
Using create-next-app
Execute create-next-app
with Yarn or npx to bootstrap the example:
npx create-next-app --example with-framer-motion with-framer-motion
# or
yarn create next-app --example with-framer-motion with-framer-motion
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-framer-motion
cd with-framer-motion
Install it and run:
npm install
npm run build
npm start
Deploy it to the cloud with now (download)
now
The idea behind the 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.