On a Blind Date with React: Animating the instructions

MatchIntro.js

componentDidMount() {
  this._tl = new TimelineLite({ paused: true });

  // Fade out the content and set it to `visibility: hidden`
  // See: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/
  this._tl.to(this._contentEl, 0.5, { autoAlpha: 0 });
  // Shrink it down to zero width
  this._tl.to([el, this._contentEl], 0.5, { width: 0, padding: 0 });
  // Hide it completely so it's not considered in the flexbox
  // layout algorithm anymore
  this._tl.set(this._contentEl, { display: 'none' });


  if (!this.props.visible) {
    // If we need to hide at the start, we'll start playback
    // from the end of the timeline, essentially moving directly
    // to its end state
    this._tl.play(this._tl.endTime());
  }
},

componentDidUpdate(prevProps) {
  if (!prevProps.visible && this.props.visible) {
    // Reverse the timeline if we become visible
    this._tl.reverse();
  }

  if (prevProps.visible && !this.props.visible) {
    this._tl.play();
  }
},