History

Nate Moore 61a9cfb317 Add Framer Motion example (#9185 ) * 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		2019-10-29 23:21:03 -04:00
..
components	Add Framer Motion example (#9185 )	2019-10-29 23:21:03 -04:00
pages	Add Framer Motion example (#9185 )	2019-10-29 23:21:03 -04:00
constants.js	Add Framer Motion example (#9185 )	2019-10-29 23:21:03 -04:00
package.json	Add Framer Motion example (#9185 )	2019-10-29 23:21:03 -04:00
README.md	Add Framer Motion example (#9185 )	2019-10-29 23:21:03 -04:00

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.