Installation
TransitionLink requires that you both add it to gatsby-config.js
and import it as a page component.
Add TransitionLink to your project
yarn add gatsby-plugin-transition-link
npm i gatsby-plugin-transition-link
Add TransitionLink to gatsby-config.js
.
// gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-transition-link`
]
];
Import it in your pages and components
import TransitionLink from 'gatsby-plugin-transition-link'
Note: mixing Gatsby's Link and TransitionLink will prevent the scroll position from being updated when navigating using Gatsby's Link. To prevent this problem import Link from gatsby-plugin-transition-link
instead of from gatsby
.
import Link from 'gatsby-plugin-transition-link'
Usage with gatsby-plugin-layout
(and other persistent layouts)
Since it was difficult to get layouts working properly with this plugin, I've added layout support to TransitionLink. Remove gatsby-plugin-layout
and other persistent layouts from your project and add your Layout component as an option in gatsby-config.js
.
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-transition-link",
options: {
layout: require.resolve(`./src/components/Layout.jsx`)
}
}
]
];
Note: when you add a layout component option, be sure to not also include this component in your pages or you will end up with the layout nested inside itself.