Low Hanging Animation Options

[spherop]

One of the things that would be nice to have is either animation examples via added modules, or something baked in to the core that makes it obvious and easy to add animations/transforms to blog page changes.

[KyleAMathews]

It'd be nice to have an easy way to do this. But before that it'd be nice to have someone do some exploration for available options.

One simple animation is simply fading in pages when you navigate to them as described here:

http://blog.mxstbr.com/2015/07/fade-in-react/

[spherop]

My initial thought had been to drop this in to gatsby: https://github.com/maisano/react-router-transition which includes react-motion -- seems like could provide a robust set of options but unmet peer dependencies installing and haven't yet had time to look into further.

The example you show above looks good for basic and solid approach to page transitions.

[KyleAMathews]

If someone wanted to created some demo sites with animated page transition examples that'd be great!

[f0rr0]

Hey! I was wondering if we could do something like starting from an initial opacity of 0 and then:

componentDidMount() {
  this.fadeIn(document.querySelector('.container'));
}

The fadeIn method can be whatever as per users' tastes. This can improved to add staggering too. In fact, I use this here.
Thoughts on pitfalls/improvements?

[derekperkins]

I saw a gif of navigation animation from @tannerlinsley. He submitted #1415 to make it possible

[tannerlinsley]

#1415 enables pretty much any animation framework or strategy to be used

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]

@stevensurgnier has been working on adding great support for page transitions —
see https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions