Edit in JSFiddle

<span id="trigger-office"></span>
<span class="spacer"></span>

<div class="viewport">

  <div class="set-piece-wrapper">

    <div class="set-piece set-rotate"></div>
    <!-- / This background rotates into position / -->

    <div class="set-piece set-screen"></div>
    <!-- / This background scales up from small to big / -->
  </div>
  <!-- .set-piece-wrapper -->

  <div class="floor"></div>
  <!-- .floor -->

  <span class="fred"></span>
  <!-- .fred -->


</div>
<!-- viewport -->

// Simple box model
*,
*:before,
*:after {
  box-sizing: border-box;
}

.spacer {
  width: 100%;
  height: 400vh;
  display: block;
}

.viewport {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}

// Screen rotate and scale
// ------------------------------------ /
// Set piece screen - wrapper
.set-piece-wrapper {
  width: 236px;
  height: 334px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  bottom: 270px;
  z-index: 10;
}

// Set piece which rotates
.set-rotate {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #d0e1e9;
  border-radius: 10px
}

// Set piece which scales in
.set-screen {
  background-color: #b9d2d5;
  display: block;
  position: absolute;
  left: 50%;
  top: 65px;
  width: 300px;
  height: 204px;
  margin-left: -150px;
  border-radius: 6px;
  transform: scale(0);
  z-index: 2;
}

// Floor - Appears from the bottom of the scene
.floor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background-color: #383a45;
  transform-origin: bottom center;
  transform: scaleY(0);
  height: 50px;
  width: 100%;
  z-index: 5;
}

// Fred - Who slides in from the left
.fred {
  position: absolute;
  bottom: 50px;
  left: 50%;
  margin-left: -310px;
  transform: translateX(-1000px);
  width: 310px;
  height: 445px;
  display: block;
  z-index: 2;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('https://waaffle.com/img/desk-chair.svg') no-repeat center center;
    background-size: cover;
    Œ
  }
}

// Add controller for animation
var officeController = new ScrollMagic.Controller();

// Office animation timeline
var officeTimeline = new TimelineMax()

// Timeline /
// ------------------------------
.add(TweenMax.to($(".set-rotate"), 1, {
    rotation: 90,
    ease: Back.easeInOut
  }), 0) // Rotate set piece 90 degrees

// Bring in the screen
.add(TweenMax.to($(".set-screen"), 1, {
    scale: 1,
    ease: Power1.easeOut
  }), .7) // Scale in the screen

// Floor
.add(TweenMax.to($(".floor"), 1, {
    css: {
      transform: "scaleY(1)"
    },
    ease: Power1.easeOut
  }), 0) // Bring in floor

// Fred
.add(TweenMax.to($(".fred"), 2, {
    css: {
      transform: "translateX(0)"
    },
    ease: Power1.easeOut,
  }), 0) // Slide in Fred

// Build the scene
var officeScene = new ScrollMagic.Scene({
  triggerElement: "#trigger-publish",
  triggerHook: "0",
  duration: "1000"
})

.setTween(officeTimeline)
  .addIndicators({
    name: "desk animation"
  })
  .addTo(officeController);