Gatsby: How best to create animated page transitions?

[tangert]

Just wondering if there's a standard here for what people are doing. I was thinking of just putting a css transition on the elements when they enter the DOM, but since gatsby is built on top of react-router I'd assume there's a better solution

[nickmaltsev]

As an example: #1415

[hochem]

Another example using react-router's withRoute and CSSTransitionGroup from [email protected] package: https://github.com/hochem/gatsby-animation-example

No changes needed for gatsby package, but to keep rendered old page on URL change it uses

shouldComponentUpdate(nextProps, nextState) {
    return this.props.location.pathname === window.location.pathname;
}

(see https://github.com/hochem/gatsby-animation-example/blob/master/src/layouts/index.js)

[cstoddart]

Would this also be possible with the current version of TransitionGroup or is it necessary to use version 1.x?

edit: I guess I missed it but now I see that the example was updated 2 days ago to show a version using 2.x. This is great!

[Grsmto]

Hey, that works fine but the page is being scrolled up before the transition. which kinda break the transition effect...
I guess it's cause of the way Gatsby handle page changes with automatic scroll top...Any chance you found a solution to avoid this?

[sebastienfi]

https://github.com/gatsbyjs/gatsby/issues/925
https://github.com/gatsbyjs/gatsby/issues/2276

[KyleAMathews]

There's now a nice API/example site for this https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions

[jesperkc]

Is there a way to show both current and next page on top of eachother using @KyleAMathews example?

[huntercaron]

@jesperkc also trying to figure this out, will update if I make any progress. Trying to render the nextPageResources, then animating out the old page.

Would be another nice example to have if we can figure out a nice way of doing it

[huntercaron]

so far I've been able to animate in a pseudo next page with createElement(this.state.nextPageResources.component, etc) then replace it with the real page component. Not ideal, but works.

[nimaiwalsh]

Does any one know how to import the Web Animation API polyfill into Gatsby?

https://github.com/web-animations/web-animations-js

[8ctopotamus]

@nimaiwalsh

You can use npm to install the package: https://www.npmjs.com/package/web-animations-js.

Important: with gatsby you need to be careful with scripts that use document or window because there's no DOM when you run gatsby build. Check out this example gist on how to guard against this: https://gist.github.com/8ctopotamus/0c84596dc8090ded205c1196e5f7160f

[nimaiwalsh]

@8ctopotamus
Thanks heaps! It was failing on the build. The step on properly importing packages that reference the DOM worked.

[nopjia]

Also trying to figure this out. (show both current and next pages during transition)
@huntercaron If you have any updates please let us know!

[TylerBarnes]

@nopjia @huntercaron @jesperkc if you guys are still looking for a way to accomplish this I looked into it and figured it out today. The answer + example is over at #6303