[Animated Page Transitions in React using GSAP]

@Rodrigo It's alive. Thanks a lot ?.

 

My start point is here: https://codesandbox.io/s/lp94nrow1l

 

 

[Animated Page Transitions in React using GSAP]

Hey everyone. It's a very great topic. I am new to GSAP and very interested in. I have this code:

 

render() {
    return (
      <Route
        render={({ location }) => (
          <TransitionGroup>
            <Transition
              key={location.key}
              timeout={400}
              onEnter={this.onEnter}
              onExit={this.onExit}
            >
              <Switch location={location}>
                <Route exact path="/" component={CardBegin} ref={this.myRef} />
                <Route path="/step-1" component={CardStepOne} />
              </Switch>
            </Transition>
          </TransitionGroup>
        )}
      />
    );
  }

 

1. use react-transition-group (http://reactcommunity.org/react-transition-group)

2. use guide from react-router documentation Here

 

In total. Have different keys for two transitions but that I can implement gsap animation from ./animathion.js I need create a ref to DOM node, because my function has two parameters (DOMnode, callback) 

show(target, cb) {
    return TweenMax.from(target, duration, {
      opacity: 0,
      height: 0,
      onComplete() {
        cb();
      },
      ease: Elastic.easeOut.config(0.25, 1)
    });
  },

 

How can I pass there DOMnode for implementation animation?

onEnter = () => {
    animation.show(DOMnode, cb);
  };

Many thanks.