Can't get transitions to work in Gatsby using graphQL and createPages

Question

I did a git clone of gatsby-wordpress-starter (https://www.gatsbyjs.org/starters/?c=Wordpress)

Without making any changes I added pose: (https://popmotion.io/pose/examples/route-transitions-reach-router/)

Following the instructions at the above url I changed the components/layout.js file to the following (slightly different since the page paths aren't hard coded into the layout like the example):

import React from 'react'
import ReactDOM from 'react-dom';
import { Router, Link, Location } from '@reach/router';
import Helmet from 'react-helmet'

import Navbar from '../components/Navbar'
import Page from '../templates/page'
import './all.sass'
import posed, { PoseGroup } from 'react-pose';

const RouteContainer = posed.div({
  enter: { opacity: 1, delay: 300, beforeChildren: 300 },
  exit: { opacity: 0 }
});

const PosedRouter = ({ children }) => (
<Location>
    {({ location }) => (      <PoseGroup>
        <RouteContainer key={location.key}>
          <Router location={location}>{children}</Router>
        </RouteContainer>

      </PoseGroup>

)}
  </Location>
);


const TemplateWrapper = ({children}) => (
<div>

    <Helmet title="Home | Gatsby + Netlify CMS" />
    <Navbar />

        <PosedRouter/>
        {console.log(location)}
</div>
)

export default TemplateWrapper

When I run this I get: Uncaught TypeError: Cannot read property 'map' of undefined

If I expand the console.log of 'location' there is no 'key' in there

To add to this I have also tried installing the official gatsby transition plugin and this also doesn't work properly. It does the entering transition but not the exiting transition. It does fire the exited transition but not until after the page content changes.

score 0 · Answer 1 · answered Mar 22 '20 at 08:35

I would suggest another approach which is what I've always used to create page transitions (both fade-in, fade-out, and others): using gatsby-plugin-transition-link. I'm not sure about which one have you tried but this one works and has a cleaner and more semantic approach.

It allows you to create your custom animation or use some default or predefined, you can check its demo site here where there's an example of a few transitions.

For predefined transitions (the easiest way) you only need to import de component and use it like this:

import AniLink from "gatsby-plugin-transition-link/AniLink"

<AniLink paintDrip to="page-2">
  Go to Page 2
</AniLink>

For custom transitions, you need to define de entry and exit effect, such as:

<TransitionLink
  exit={{
    length: length,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "out" }),
  }}
  entry={{
    length: 0,
    trigger: ({ exit, node }) =>
      this.someCustomDefinedAnimation({ exit, node, direction: "in" }),
  }}
  {...props}
>
  {props.children}
</TransitionLink>

For further information check out their docs.

Can't get transitions to work in Gatsby using graphQL and createPages

1 Answers1