Create animated transitions between Gatsby pages

This recipe helps you create transitions for animating between entering and exiting Gatsby pages.

This recipe:

---

Installs these NPM packages:

<NPMPackage name="gatsby-plugin-transition-link" /> <NPMPackage name="gsap" />

---

Adds the following plugin to your Gatsby config:

<GatsbyPlugin name="gatsby-plugin-transition-link" />

---

Creates a few example pages to animate between:

<File path="./src/pages/transition-fade.js" content="https://gist.githubusercontent.com/gillkyle/50949d56409c338b427984c8e223034b/raw/4674121deb826f2c17a7acde4f20e9cfe8a268d5/transition-fade.js" /> <File path="./src/pages/transition-paint-drip.js" content="https://gist.githubusercontent.com/gillkyle/498fb728b580d32fa7fd53bde2510139/raw/46220f20f60265be34fd140f671008913035a25f/transition-paint-drip.js" />

---

When you run your site you can navigate to http://localhost:8000/transition-paint-drip to try it out.

See more examples about usage in the docs for the transition link plugin: https://transitionlink.tylerbarnes.ca/docs/