Animations with ReactTransitionGroup
Chang Wang
31412

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 {
 
 constructor(props){
 super(props)
 }

componentDidMount(){
 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 () {
 return(
 <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.