Easy Example for ReactTransitionGroup animation in Node

Box.jsx

import React from 'react';
import { TweenMax } from 'gsap';

export default class Box extends React.Component {

  componentWillEnter(callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, { y: 100, opacity: 0 }, { y: 0, opacity: 1, onComplete: callback });
  }

  componentWillLeave(callback) {
    const el = this.container;
    TweenMax.fromTo(el, 0.3, { y: 0, opacity: 1 }, { y: -100, opacity: 0, onComplete: callback });
  }

  render() {
    return (
      <div className="box" ref={c => this.container = c} />
    );
  }
}

Page.jsx

import React from 'react';
import { TransitionGroup } from 'react-transition-group';
import Box from './Box';

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shouldShowBox: true,
    };
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    this.setState({
      shouldShowBox: !this.state.shouldShowBox,
    });
  }

  render() {
    return (
      <div className="page">
        <TransitionGroup>
          { this.state.shouldShowBox && <Box />}
        </TransitionGroup>
        <button className="toggle-btn" onClick={this.toggleBox}>toggle</button>
      </div>
    );
  }
}

style.scss

.page {
  height: 100%;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #3498DB;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.toggle-btn {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  margin: auto;
  width: 80px;
}