react-gsap-transition

Creates an easy bridge between ReactTransitionGroup and GSAP. This is specifically helpful with staggering a group of items in/out of view with a TweenMax-based tween on enter/leave.

If GSAP isn't a requirement for your project, you might be better off with something like react-motion.

Installation

$ npm install --save react-gsap-transition

Usage

Setup the component child element that will be transitioning. All tween values are optional and should be added to the component state. In this example they are setup in _animationOpts.

Note the item being tweened should have a ref of el.

import React from 'react'
import GSAPTransitionItem from 'react-gsap-transition'

export default class extends GSAPTransitionItem {
  constructor(props) {
    super(props)

    this.state = {
      animationOpts: this._animationOptions()
    }
  }

  render() {
    return (
      <div><span ref='el'>{this.props.text}</span></div>
    )
  }

  _animationOptions() {
    return {
      staggerSpeed:   .1,
      beforeEnter:    { y: '-5%', opacity: 0 },
      enterAnimation: { y: '0%',  opacity: 1 },
      leaveAnimation: { y: '5%',  opacity: 0 }
    }
  }
}

And to use it, your parent component should look something like this:

import React from 'react'
import MyTweenedComponent from 'my_tween_component.js'

export default class extends React.Component {
  constructor(props) {
    super(props)

    this.state = { leaving: false }
  }

  render() {
    return (
      <div onClick={this._onClick}>
        <ReactTransitionGroup>
          {this._items()}
        </ReactTransitionGroup>
      </div>
    )
  }

  _onClick() {
    this.setState({ leaving: !this.state.leaving })
  }

  _items() {
    let items = ['a', 'group', 'of', 'words']

    if (!this.state.leaving) {
      return items.map(item, i) {
        let onComplete = (i == items.length - 1) ? this._onComplete.bind(this) : () => {}

        <MyTweenedComponent
          text={item}
          key={item}
          index={i}
          total={items.length}
          onComplete={onComplete}
          />
      }
    }
  }
}