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.