Add browser API to enable page transitions plugins

[tannerlinsley]

This is very provisional, but I’m excited where it’s going :)

[gatsbybot]

Deploy preview ready!

Built with commit fdf1c51

https://deploy-preview-1415--gatsbygram.netlify.com

[gatsbybot]

Deploy preview ready!

Built with commit fdf1c51

https://deploy-preview-1415--using-drupal.netlify.com

[gatsbybot]

Deploy preview ready!

Built with commit fdf1c51

https://deploy-preview-1415--gatsbyjs.netlify.com

[tannerlinsley]

Here is a demo

const React = require('react')
const { Transition } = require('react-move')

exports.componentRenderer = ({currentPage, previousPage}) => {
  console.log(currentPage, previousPage)
  return (
    <Transition
      data={[
        currentPage,
        previousPage
      ]}
      getKey={d => d.location.pathname}
      enter={d => ({
        transform: `translateX(100%)`,
        opacity: 1,
        zIndex: 1,
        boxShadow: '0 0 20px 0 rgba(0,0,0,0)',
      })}
      update={d => ({
        transform: `translateX(0%)`,
        opacity: 1,
        zIndex: 1,
        boxShadow: '0 0 100px 0 rgba(0,0,0,.5)'
      })}
      leave={d => ({
        transform: `translateX(-33%)`,
        opacity: .8,
        zIndex: 0
      })}
      ignore={['zIndex']}
      duration={700}
    >
      {nodes => (
        <div>
          {nodes.map(node => {
            const { component: Component, ...rest } = node.data
            return <div key={node.key} style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
              background: 'white',
              ...node.state
            }}>
              <Component {...rest} />
            </div>
          })}
        </div>
      )}
    </Transition>
  )
}

[KyleAMathews]

@0x80

[KyleAMathews]

Looking good! This is really exciting!

I tried your demo code on www and it mostly worked. I had to add a check if there was a previous page so as to not navigate on the initial render which I think plugins will always need to handle but otherwise it worked as expected! Exciting!

[KyleAMathews]

This should be this.previousProps

[KyleAMathews]

Let's name this API replacePageComponentRenderer per https://www.gatsbyjs.org/docs/api-specification/#operators

[tannerlinsley]

I'll update these changes asap

[0x80]

When I tried the example code, besides the mentioned previousPage workaround, the props.data of the rendered page seems to be undefined. So the result of the graphql query appears to be missing. I can't quite figure out where it went wrong.

[KyleAMathews]

@tannerlinsley hey I'm going to take a crack at finishing this — a client needs this functionality added ASAP.

[KyleAMathews]

Deploy preview failed.

Built with commit fdf1c51

https://app.netlify.com/sites/using-glamor/deploys/5963ed5ecf321c63a9d70aaf

[KyleAMathews]

Ok so didn't end up finishing this as the client and I decided to go with a simple entry animation for components not an exit & entry animation.

I did push a commit fixing up some things. Want to push this across the finish line still @tannerlinsley ?

[theiliad]

Is there an update on this? Any sample code?

[hochem]

@theiliad I added an example that doesn't rely on gatsby package modification in #1854

[LekoArts]

Any news on this? 👍

[KyleAMathews]

Closing this as @stevensurgnier added an API with alternative approach to solving this issue #2557

Thanks to everyone who's participated here! Check out the new API and let us know what you think!