Animations with ReactTransitionGroup
Chang Wang

This is really thought provoking, Im new to HOC stuff. But can I ask why are you using Transition group at all , you could just tween the wrapped component using componentDidMount and componentWillUnmount lifecycle hooks ? To be honest I had trouble getting your example to work but using the react lifecycle hooks above works OK — thanks for the inspiration.

heres the code I wrote based off your example:

import React, {Component} from ‘react’
import ReactDOM from ‘react-dom’
import {TweenMax} from ‘gsap’

export default (WrappedComponent, options = { duration: 0.9 }) => class extends Component {

 const el = ReactDOM.findDOMNode(this);
 TweenMax.fromTo(el, options.duration, {y: 100, opacity: 0}, {y: 0, opacity: 1});

componentWillUnMount () {
 const el = ReactDOM.findDOMNode(this);
 TweenMax.fromTo(el, options.duration, {y: 0, opacity: 0.5}, {y: -100, opacity: 0});

render () {
 <WrappedComponent ref=”child” {…this.props} />

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.