<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);