React issues with transitiongroup hooks


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) {

  render() {
  	return (
  		<div className="site-wrapper">


  	<Router history={browserHistory}>
    	<Route component={App}>
      		<Route path="/" component={Home} />
      		<Route path="about" component={About} />
), 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 {


		this.el = findDOMNode(this)

		new Intro()


		TweenMax.from(this.el, 1, { alpha: 0, onComplete: callback })

	componentWillLeave(callback){, 0, { alpha: 0, onComplete: callback })


		return (
			<div className="page page--home">
				<div className="page__inner">
					<Work />


export default Home

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.