Hi,
I’m having problems. My transition hooks isn’t being called, or well, that is not exactly true, willAppear is called upon the initial render, but other than that nothing, no willEnter/willLeave during transitions between routes. Can someone take a look at my code and see what I might be missing? I am using GSAP/JS -animations because the animations will be to complex (my code only includes basic ones for easier overview) for it to be sustainable to use CSS. I am a bit surprised of the lacking documentation regarding JS animations in React. The official docs are not very good.
Component “A”:
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'
import TransitionGroup from 'react-addons-transition-group'
import Home from './sections/home/home.jsx'
import About from './sections/about/about.jsx'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="site-wrapper">
<TransitionGroup>
{this.props.children}
</TransitionGroup>
</div>
)
}
}
render((
<Router history={browserHistory}>
<Route component={App}>
<Route path="/" component={Home} />
<Route path="about" component={About} />
</Route>
</Router>
), document.getElementById('app'))
Component “B”:
import React from 'react'
import { render, findDOMNode } from 'react-dom'
import TweenMax from 'gsap'
import Intro from '../preloader'
import Work from './work.jsx'
class Home extends React.Component {
constructor(props){
super(props)
}
componentDidMount(){
this.el = findDOMNode(this)
}
componentWillAppear(callback){
new Intro()
callback()
}
componentWillEnter(callback){
TweenMax.from(this.el, 1, { alpha: 0, onComplete: callback })
}
componentWillLeave(callback){
TweenMax.to(this.el, 0, { alpha: 0, onComplete: callback })
}
render(){
return (
<div className="page page--home">
<div className="page__inner">
<Work />
</div>
</div>
)
}
}
export default Home