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