How to transition pages in Gatsby

[JakeElder]

I'm trying to use React Spring to transition pages in Gatsby, similar to this - http://joshdcuneo.com/gatsby-animate-page-transitions/

Here is a Code Sandbox of my implementation attempt - https://codesandbox.io/s/great-sky-3g2lo?fontsize=14&hidenavigation=1&theme=dark

It uses Gatsby's wrapPageElement API to add the transition in gatsby-browser.js

import React from 'react'
import { animated, useTransition } from 'react-spring'

const SimpleSpring = ({ children, props }) => {
  const transitions = useTransition(props.path, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 3000 }
  })

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      {transitions.map(({ item, key, props }) => (
        <animated.div key={key} style={props}>
          {children}
        </animated.div>
      ))}
    </div>
  )
}

export const wrapPageElement = ({ element, props }) => {
  return <SimpleSpring props={props}>{element}</SimpleSpring>
}

Currently, when a page transition is triggered, React Spring is animating the origin page out and the target page in. That is to say that during the transition period, there are two pages that are animating as specified in the hook. However, the source page instantly updates to have the DOM structure of the target page. So, there are two identical pages, one transitioning out, one transitioning in.

What am I doing wrong? I've tried all sorts of things with useRef and React.cloneElement but I can't get the origin page to remain as it should

Notes

• I've used a long duration for the animation rather than a spring to be able to better see what's happening
• Same with layout. Once the DOM is reflecting as it should, these pages will be position: absolute during transition so they overlap. I currently have them side by side to debug

[nickmcmillan]

I struggled with this for a while and faced the same issues you're describing. I ended up finding a workable solution, though there's probably scope for improvement;

https://github.com/nickmcmillan/gatsby-use-react-spring-route-transitions

[DRD161]

I had issues getting the hooks to work as well. I went the render props route and everything seems to work fine now. Code below as an example. Hope you figure this out!

import React from "react"
import { Transition } from "react-spring/renderprops"
import DesktopNav from "../components/Nav"
import SideNav from "../components/SideNav"

import { useStaticQuery, graphql } from "gatsby"

import "../styles/styles.scss"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div>
      <SideNav siteTitle={data.site.siteMetadata.title} />
      <DesktopNav siteTitle={data.site.siteMetadata.title} />
      <Transition
        config={{ duration: 500, delay: 200 }}
        from={{ opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {() => style => <main style={style}>{children}</main>}
      </Transition>
    </div>
  )
}

export default Layout

[lucasvocos]

This helped me, thanks!

[tompiler]

Has anyone got this to work with anything besides opacity? tearing my hair out over this, have been struggling for about a whole week now.

[DRD161]

@tompiler I’ve managed to get it working with left and right positioning to create a slide animation. If you want to do some sort of overlay transition when exiting the page I’d imagine you could create an overlay div and have the opacity set to 0 and have it animate into view when changing pages 🤔

[tompiler]

@DRD161 Thanks for the suggestion - I'm basically trying to wrangle this with gatsby-plugin-transition-link library, and the state prop that is passed to the TransitionLink variable, but it just doesn't work properly, passes through nulls when it should be carrying state and various other issues. The documentation of that plugin is about as lacking as it is for react-spring. Not complaining, but I'd happily foot up cash for better docs or help. Its a sad situation when I spend this much time achieving nothing. Imagine a lot of people are in the same situation.

[JakeElder]

Hi guys

The answer found on Spectrum works well for me - https://spectrum.chat/react-spring/general/transitioning-pages-in-gatsby~17877b6f-56f5-40e7-ae3c-188dba64b3ca

Solution on Code Sandbox: https://s1rg4.sse.codesandbox.io/

[DRD161]

@tompiler Yeah I had a few issues myself trying to get that to work. I decided to use the render props react-spring provides. I also spoke with @aleclarson who told me that he is hoping to improve the docs in the next release so that should help with some of the confusion.

[tompiler]

@JakeElder Thanks for posting this - I'll take a look!

@DRD161 thanks again - I've finally cracked it I think, going to be writing a blog post once its all finished and will use that to try and help out with the docs.

[aleclarson]

Anyone that wants to write a guide for this, let me know. I will repost it on the official website (once v9 is released), with a link to your personal blog. 👍

[adamatronix]

Was there any concrete solutions to this? Issue I'm currently having is on route change the component mounts and enter animates, but unmounts immediately so there is no leave animation.

The layout I use in my wrapPageElement:

import React from "react";
import { useTransition, animated } from 'react-spring'
import Header from "modules/Header/Header";

const Base = ({ location, children }) => {
  const transitions = useTransition(location,  {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: {
      duration: 20000
    }
  })
  return (
    <>
      <Header />
      { transitions((props, item) => item && (
        <animated.div style={props}>
          { children }
        </animated.div>
      )) }
    </>
  );
};

export default Base;

[adamatronix]

Actually it was easier than I had thought. Need to use exitBeforeEnter and pass in the children.

import React from "react";
import { useTransition, animated } from 'react-spring'
import Header from "modules/Header/Header";

const Base = ({ location, children }) => {
  const transitions = useTransition(children,  {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    exitBeforeEnter: true,
  })

  return (
    <>
      <Header />
      { transitions((props, item) => (
        <animated.div style={props}>
          { item }
        </animated.div>
      )) }
    </>
  );
};

export default Base;