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