Edit in JSFiddle

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

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

.setTween(officeTimeline)
  .addIndicators({
    name: "desk animation"
  })
  .addTo(officeController);
<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>
<!-- viewport -->
*,
*: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;
}