State isn't updated properly and components are being remounted using TransitionLink

[TylerBarnes]

"I'm encountering a similar issue using anime.js to animate the transition, when I click a <TransitionLink> element back to the homepage it appears to mount the components on the page multiple times but also doesn't update the state on other elements properly."

• @andrwrbnsn

@andrwrbnsn, are you able to provide a demo repo for me to check out? I think that's the only way I'll be able to debug this. If the project is private, even just a .zip via email would work.

[a-rbsn]

Hey @TylerBarnes thanks for responding — I believe this relates to my issue here: Component not animating with react...

Turns out using a styled.div from emotion as a Wrapper doesn't co-operate well with animations.

[Seavenly]

I'm facing what I think may be a similar issue. It appears that adding a TransitionLink anywhere within a page component causes the page to render twice as many times. The page component looks to be remounting causing animations to jerk and replay when being controlled by react-spring. I have links in both my global navigation (which appear to work fine) and within the body of my pages (which have the issue) that I am attempting to animate with various page transitions. At the end of animations triggered from links in the page, I am seeing my component jerk around.

This does not occur when used above the page components, in a wrapping layout component.

This can be replicated with the following steps:

1. Clone https://github.com/gatsbyjs/gatsby-starter-default
2. Add gatsby-plugin-transition-link to config
3. Convert Gatsby Link's to TransitionLink
4. Add console.log to index.js

If you log transitionState you will see that entered is happening twice on initial load.

[reilnuud]

Have either of you tried this: https://transitionlink.tylerbarnes.ca/docs/installation/#usage-with-gatsby-plugin-layout

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.

It worked for me!