React issues with transitiongroup hooks

[ReGGaeBOSS]

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