On a Blind Date with React: Animating the video slide in

Person.js

componentDidMount() {
  const el = findDOMNode(this);
  // Determine if we should animate from the left or from the right
  const percentage = this.props.direction === 'left' ? -100 : 100;

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

  // Force full width, because our parent element is a Flex item. Otherwise,
  // we wouldn't get enough width from the flexbox algorithm.
  this._tl.set(el, { width: '100%' });

  // This adds a point in the timeline where we can reference to
  this._tl.addLabel('repeatable');
  
  // Animate the X coordinate from -100% to 0% (if direction is 'left')
  // or from 100% to 0% (if direction is 'right') 
  this._tl.from(el, 1, { xPercent: percentage });

  // Called when the timeline is completed, also on repeated playback
  this._tl.eventCallback('onComplete', () => {
    // This lets the parent component know we're done animating, so it can
    // start video playback
    this.props.onReady();
  });

  // Kick off timeline playback
  this._tl.play();
},

componentDidUpdate(prevProps) {
  if (prevProps.person !== this.props.person) {
    // New person selected means we need to repeat the animation from
    // the 'repeatable' label
    this._tl.play('repeatable');
  }
},