On a Blind Date with React: Animating the Avatars

Avatar.js

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

  this._tl.add([
    // Fade out the Avatar Info (name and background)
    TweenLite.to(this._infoEl, 0.5, { opacity: 0, width: 0, margin: 0 }),
    // Scale down the Avatar image
    TweenLite.to(this._figureEl, 0.5, { scale: 0.75 })
  ]);

  // Hide the Avatar Info completely
  this._tl.set(this._infoEl, { display: 'none' });

  if (this.props.small) {
    // If this Avatar is small at the start, begin Timeline playback from the end of the timeline,
    // essentially moving directly to its end state
    this._tl.play(this._tl.endTime());
  }
},

componentDidUpdate(prevProps) {
  if (!prevProps.small && this.props.small) {
    this._tl.play();
  }

  if (prevProps.small && !this.props.small) {
    // Reverse playback to reverse the animation
    this._tl.reverse();
  }
},