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="desk">
    <span class="bench bench-1"></span>
    <span class="bench bench-2"></span>

    <span class="leg leg-2"></span>
    <span class="leg leg-3"></span>
    <span class="leg leg-1"></span>
    <span class="leg leg-4"></span>
  </div>
  <!-- .desk -->

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

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

</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;
  }
}

.desk {
  width: 600px;
  height: 220px;
  position: absolute;
  left: 50%;
  bottom: 48px;
  margin-left: -300px;
  .bench,
  .leg {
    position: absolute;
  }
  .bench {
    top: 0;
    height: 18px;
    transform: scaleX(0);
  }
  .bench-1 {
    background-color: #e1f0f7;
    right: 50%;
    width: 245px;
    margin-right: 55px;
    transform-origin: right;
    z-index: 1;
  }
  .bench-2 {
    background-color: #d0e1e9;
    width: 360px;
    left: 50%;
    margin-left: -60px;
    transform-origin: left;
    z-index: 3;
  }
  .leg {
    width: 24px;
    top: 18px;
    height: 205px;
    transform-origin: top;
    transform: scaleY(0);
    &:before,
    &:after {
      content: '';
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
  }
  .leg-1 {
    left: 0;
  }
  .leg-2 {
    left: 228px;
  }
  .leg-3 {
    right: 245px;
  }
  .leg-4 {
    right: 0;
  }
  .leg-1,
  .leg-3 {
    z-index: 1;
  }
  .leg-2,
  .leg-4 {
    z-index: 3;
  }
  .leg-1:before {
    background-color: #e1f0f7;
  }
  .leg-1:after {
    background-color: #d0e1e9;
  }
  .leg-2:before {
    background-color: #e1f0f7;
  }
  .leg-2:after {
    background-color: #d0e1e9;
  }
  .leg-3:before {
    background-color: #b9d2d5;
  }
  .leg-3:after {
    background-color: #d0e1e9;
  }
  .leg-4:before {
    background-color: #b9d2d5;
  }
  .leg-4:after {
    background-color: #d0e1e9;
  }
}
// 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 desk /
// ------------------------------

// Desk - top
.add(TweenMax.to($(".bench"), 2, {
    css: {
      transform: "scaleX(1)"
    },
    ease: Back.easeOut
  }), 0) // add desk top

// Desk - legs
.add(TweenMax.staggerFromTo($(".leg"), 2, {
    "transform": "scaleY(0)"
  }, {
    "transform": "scaleY(1)",
    ease: Power4.easeInOut
  }, 0.1), 0) // Extend desk legs

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

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