[1.0] build example site with fancy page transitions

[KyleAMathews]

Something like this would be 💯

https://codepen.io/sdras/full/gWWQgb/?utm_source=reactnl&utm_medium=email

[anthonysapp]

I'm actually working on implementing something with
https://github.com/reactjs/react-transition-group#low-level-api-transitiongroup

Any ideas on how to do that?
I've tried a couple of approaches so far in fiddling around:

1. Something like this in the default layout, in the render method:

<TransitionGroup component="div" className="page">
    {children}
</TransitionGroup>

2. Wrapping the root component in using the gatsby-browser.js wrapRootComponent lifecycle hook.

For both, the pages render fine, but I haven't been able to get TransitionGroup's lifecycle hooks to work.

[KyleAMathews]

I'm not really sure how TransitionGroup works but I'd love to get things working such that there could be plugins which auto add transition effects (perhaps have 5-6 diff options) to a site or to individual pages.

[KyleAMathews]

Also this will effect things #940

[KyleAMathews]

*affect

[anthonysapp]

Ah crap. I for some reason thought Gatsby had already changed to RR V4. That's probably part of the problem :)

I will keep plugging away and report back findings. The TransitionGroup functionality seems to have changed in a recent update to React, and it's been moved to a new repo with new maintainers, so I'm sure that's also part of my misunderstanding.

[KyleAMathews]

Check back tomorrow and it might be! :-)

…

On Tue, May 9, 2017, 2:27 PM Anthony Sapp ***@***.***> wrote: Ah crap. I for some reason thought Gatsby had already changed to RR V4. That's probably part of the problem :) I will keep plugging away and report back findings. The TransitionGroup functionality seems to have changed in a recent update to React, and it's been moved to a new repo with new maintainers, so I'm sure that's also part of my misunderstanding. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#925 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEVh6c5avDIqyy2nP3xrJPtQNPesHV9ks5r4NojgaJpZM4NSIlb> .

[anthonysapp]

@KyleAMathews so after some more digging I've definitely figured out what needs to be done to implement this type of transition at the page level. I think an elegant way to do this would be to wrap the component for each page you want to transition in a TransitionGroup component. I'm having a crack at doing this using a HOC at the moment.

[anthonysapp]

After reading the plan for #940 , I think it's best to wait to do any further implementation of this. I did figure it out, though. I'll have a crack at explaining it, so perhaps it will help in some way with the changes that are coming.

What I ultimately found is that I needed to interact with the components that are generated for each page in the .cache/child-routes.js file. SInce it is those components that are ultimately rendered as the children of your layout eg: src/layouts/default.js. This was obviously a bit problematic - maybe due to something I'm missing. What I ended up doing in my default.js layout is wrapping the rendered child component in a <TransitionGroup> component:

<div className="page-container">
    <TransitionGroup>
        <children.type {...this.props} key={this.props.location.pathname} />
    </TransitionGroup>
</div>

I know that <children.type/> is the component Gatsby derives, and the default.js layout component doesn't get removed from the DOM, so it seems to be the place you want to control page transitions from (unless the layout changes, I suppose).

So the problem from there was, TransitionGroup calls lifecycle methods in the component it's wrapping... so it's going to try to call them in the derived component in child-routes.js, NOT in my actual template component for each page. So from there, I wrote a little utility to map the lifecycle methods up the chain to the page template component, but it seems very hack-ish to me.

Helper script src/transitions/bindTransitions.js

const lifeCycleHooks = [
  "componentWillAppear",
  "componentWillEnter",
  "componentWillLeave",
  "componentDidAppear",
  "componentDidEnter",
  "componentDidLeave"
];

const bindTransitions = instance => {
  const parentPrototype = instance.props.children.type.prototype;
  lifeCycleHooks.forEach(methodName => {
    if (instance[methodName] !== undefined) {
      instance[methodName] = instance[methodName].bind(instance);
      parentPrototype[methodName] = instance[methodName];
    }
  });
};
export default bindTransitions;

Then, in src/templates/page-template.js:

import { bindTransitions } from "../transitions";
class PageTemplate extends React.Component {
  constructor(props) {
    super(props);
    
    // call helper script to map TransitionGroup lifecycle hooks
    bindTransitions(this);
  }

  componentWillAppear(cb) {
    this.animateIn(cb);
  }

  componentWillEnter(cb) {
    this.animateIn(cb);
  }

  componentWillLeave(cb) {
    this.animateOut(cb);
  }

  animateIn(cb){
      // do animation and trigger cb when done
      cb()
  }
   animateOut(cb){
      // do animation and trigger cb when done
      cb()
  }

  render(){
      ...
  }
}

TransitionGroup now works as expected, with the ability to map its lifecycle hooks to any page template component, and do custom animations with EG gsap tweening engine.

Hopefully that makes some kind of sense :)

[anthonysapp]

In messing around with this some more this morning, I realized this method doesn't work when doing a production build... I still think the above post might be useful though, hopefully.

[KyleAMathews]

#940 is merged now btw. Since this.props.children is a function now for layouts, perhaps that can be leveraged for this?

[anthonysapp]

Cool, I will have a look.

[anthonysapp]

So much better! I was able to get something workable going.
One remaining issue in my work in progress: on a production build, if I load the site on any route that isn't the main "/" route I get this error:

If I go to the root route first, everything works fine.

Seems like it might have something to do with code splitting not loading a required file, but I'm not 100% sure.

[0x80]

I've been experiencing this issue too, but hadn't investigated enough to report it yet. Not sure how long has been there but I suspect since the router v4 update.

@KyleAMathews Should we maybe make a separate issue for it? Or do you have this on your radar already?

[KyleAMathews]

Do you have a layout component? At layouts/index.js?

…

On Tue, May 16, 2017, 10:53 PM Thijs Koerselman ***@***.***> wrote: I've been experiencing this issue too, but hadn't investigated enough to report it yet. Not sure how long has been there but I suspect since the router v4 update. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#925 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEVhxF_gJ9BVl3tmLwF-aOaJge28MyOks5r6gy1gaJpZM4NSIlb> .

[0x80]

@KyleAMathews Yes

[anthonysapp]

Yes, at layouts/index.js

[KyleAMathews]

Afaik none of the example apps do this. If you can help narrow down things more. Also what is that line of code?

…

On Tue, May 16, 2017, 11:58 PM Anthony Sapp ***@***.***> wrote: Yes, at layouts/index.js — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#925 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEVh0n-8mEEqpLPjx57SOpv8a4L9WsIks5r6hvxgaJpZM4NSIlb> .

[anthonysapp]

@KyleAMathews of course, apologies for being vague. I will have a closer look tomorrow and report back. Worth opening a new issue?

[KyleAMathews]

Yeah sounds like it

[0x80]

#981

[muhajirdev]

Any progress on this? is it possible now?

[yunda]

☝️

[sebastienfi]

https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions

[KyleAMathews]

Per @sebastienfi comment, we've got solid support now for page transitions — would love a really fancy example site too someday but this will suffice for now.

[thebarty]

Hi guys,

is anyone using scroll-to-anchor animations?

I am having weird rendering-issues with https://www.npmjs.com/package/react-anchor-link-smooth-scroll

[mvasin]

Did somebody use react-spring / react-motion / pose for more sophisticated transitions between pages? Are there any examples on integration gatsby with those libraries?

Ideally I'd morph one page into another like this.

Transition-In is no-brainer, but I'm not sure how can I transition-Out or cross-fade.