Search the Community
Showing results for tags 'reversing'.
Found 1 result
-
I'm having trouble trying to solve why my TimelineMax does not want to reverse when scrolling up. The timeline appears to autoplay and stop. Any advice? Thank you in advance. <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>A New Formula for Growth Marketing || G=mc2</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,400|Roboto:100,700" rel="stylesheet"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="trigger"></div> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div id="intro" class="header-container fs"> <div class="wrapper"> <section class="section-intro"> <h1 class="green">Heading 01</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <p class=""> <a href="#slide01" class="button">Find out how</a> </p> </section> </div> </div> <nav> <ul> <li><a href="#intro"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li> <li><a href="#slide01"><span class="nav-dot"></span><span class="nav-label">Connected</span></a></li> <li><a href="#slide02"><span class="nav-dot"></span><span class="nav-label">Don't drop</span></a></li> <li><a href="#slide03"><span class="nav-dot"></span><span class="nav-label">New Formula</span></a></li> </ul> </nav> <div class="main-container"> <article id="slide01" class="slide fs"> <div class="wrapper"> <section class="section-left"> <h1 class="green">Heading 02</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> <section class="section-right"> <div id="animate1"> <svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 250"> <g id="group_01" class="cls-1"> <g class="rect_01"> <rect class="rec_blue" x="157.5" y="119.5" width="50" height="10" transform="translate(307 -57.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="119.5" width="50" height="10" transform="translate(292 -42.5) rotate(90)"/> </g> </g> <g id="group_02" class="cls-3"> <g class="rect_02"> <rect class="rec_blue" x="150" y="62.5" width="50" height="10"/> <rect class="rec_green" x="150" y="77.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="100" y="112.5" width="50" height="10"/> <rect class="rec_green" x="100" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="200" y="112.5" width="50" height="10"/> <rect class="rec_green" x="200" y="127.5" width="50" height="10"/> </g> <g class="rect_02"> <rect class="rec_blue" x="150" y="162.5" width="50" height="10"/> <rect class="rec_green" x="150" y="177.5" width="50" height="10"/> </g> </g> <g id="group_03"> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="69.5" width="50" height="10" transform="translate(207 -57.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="69.5" width="50" height="10" transform="translate(192 -42.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="69.5" width="50" height="10" transform="translate(307 -157.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="69.5" width="50" height="10" transform="translate(292 -142.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="107.5" y="169.5" width="50" height="10" transform="translate(307 42.5) rotate(90)"/> <rect class="rec_green" x="92.5" y="169.5" width="50" height="10" transform="translate(292 57.5) rotate(90)"/> </g> <g class="rect_03"> <rect class="rec_blue" x="207.5" y="169.5" width="50" height="10" transform="translate(407 -57.5) rotate(90)"/> <rect class="rec_green" x="192.5" y="169.5" width="50" height="10" transform="translate(392 -42.5) rotate(90)"/> </g> </g> <g id="group_04"> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="19.5" width="50" height="10" transform="translate(207 -157.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="19.5" width="50" height="10" transform="translate(192 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="57.5" y="119.5" width="50" height="10" transform="translate(207 42.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="119.5" width="50" height="10" transform="translate(192 57.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="257.5" y="119.5" width="50" height="10" transform="translate(407 -157.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="119.5" width="50" height="10" transform="translate(392 -142.5) rotate(90)"/> </g> <g class="rect_04"> <rect class="rec_blue" x="157.5" y="219.5" width="50" height="10" transform="translate(407 42.5) rotate(90)"/> <rect class="rec_green" x="142.5" y="219.5" width="50" height="10" transform="translate(392 57.5) rotate(90)"/> </g> </g> <g id="group_05" class="cls-6"> <g class="rect_05"> <rect class="rec_blue" x="100" y="12.5" width="50" height="10"/> <rect class="rec_green" x="100" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="12.5" width="50" height="10"/> <rect class="rec_green" x="200" y="27.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="62.5" width="50" height="10"/> <rect class="rec_green" x="50" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="62.5" width="50" height="10"/> <rect class="rec_green" x="250" y="77.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="50" y="162.5" width="50" height="10"/> <rect class="rec_green" x="50" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="250" y="162.5" width="50" height="10"/> <rect class="rec_green" x="250" y="177.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="100" y="212.5" width="50" height="10"/> <rect class="rec_green" x="100" y="227.5" width="50" height="10"/> </g> <g class="rect_05"> <rect class="rec_blue" x="200" y="212.5" width="50" height="10"/> <rect class="rec_green" x="200" y="227.5" width="50" height="10"/> </g> </g> <g id="group_06"> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="19.5" width="50" height="10" transform="translate(107 -57.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="19.5" width="50" height="10" transform="translate(92 -42.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="19.5" width="50" height="10" transform="translate(307 -257.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="19.5" width="50" height="10" transform="translate(292 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="69.5" width="50" height="10" transform="translate(107 42.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="69.5" width="50" height="10" transform="translate(92 57.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="69.5" width="50" height="10" transform="translate(407 -257.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="69.5" width="50" height="10" transform="translate(392 -242.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="7.5" y="169.5" width="50" height="10" transform="translate(207 142.5) rotate(90)"/> <rect class="rec_green" x="-7.5" y="169.5" width="50" height="10" transform="translate(192 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="307.5" y="169.5" width="50" height="10" transform="translate(507 -157.5) rotate(90)"/> <rect class="rec_green" x="292.5" y="169.5" width="50" height="10" transform="translate(492 -142.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="57.5" y="219.5" width="50" height="10" transform="translate(307 142.5) rotate(90)"/> <rect class="rec_green" x="42.5" y="219.5" width="50" height="10" transform="translate(292 157.5) rotate(90)"/> </g> <g class="rect_06"> <rect class="rec_blue" x="257.5" y="219.5" width="50" height="10" transform="translate(507 -57.5) rotate(90)"/> <rect class="rec_green" x="242.5" y="219.5" width="50" height="10" transform="translate(492 -42.5) rotate(90)"/> </g> </g> <g id="group_07" class="cls-8"> <g class="rect_07"> <rect class="rec_blue" y="12.5" width="50" height="10"/> <rect class="rec_green" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="12.5" width="50" height="10"/> <rect class="rec_green" x="300" y="27.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="112.5" width="50" height="10"/> <rect class="rec_green" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="112.5" width="50" height="10"/> <rect class="rec_green" x="300" y="127.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" y="212.5" width="50" height="10"/> <rect class="rec_green" y="227.5" width="50" height="10"/> </g> <g class="rect_07"> <rect class="rec_blue" x="300" y="212.5" width="50" height="10"/> <rect class="rec_green" x="300" y="227.5" width="50" height="10"/> </g> </g> </svg> </div> </section> </div> <!-- .wrapper --> </article> <article id="slide02" class="slide fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 03</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> </section> </div> <!-- .wrapper --> </article> <article id="slide03" class="slide is-light fs"> <div class="wrapper"> <section class="section-left"> <header> <h1 class="green">Heading 04</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p><strong>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</strong></p> <a href="#" class="button">Watch our video</a> </section> </div> <!-- .wrapper --> </article> </div> <!-- #main-container --> <div class="footer-container"> <footer> <h3> 2017 © The Company, All rights reserved.</h3> </footer> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="js/main.js"></script> </body> </html> .clear:before, .clear:after { content: ' '; display: table; } .clear { *zoom: 1; } .clear:after { clear: both; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 400; } dfn { font-style: italic; } h1 { font-family: 'Roboto', Helvetica, Helvetica Neue, Arial, sans-serif; font-weight: 100; font-size: 2.5em; margin: .67em 0; } h2 { font-family: 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; font-size: 1.2em; font-weight: 400; } p { font-family:'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif; line-height: 1.5; font-size: 1.2em; font-weight: 100; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */ html { color: #222; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { } .wrapper { width: 80%; margin: 0; } /* Make the body 100% of the browser viewport height */ html, body { height: 100%; margin: 0; } .green { color: #79BC6F; } .blue { color: #37A6DE } .dark-blue { color: #1F1645; } /* ========================================================================== Author's custom styles ========================================================================== */ /* =Header */ .header-container { text-align: center; color: #ffffff; background: #1F1645; } .header-container .wrapper { padding-top: 120px; z-index: 2; } .rec_blue{ fill:#35a8e0; } .rec_green{ fill:#79bc6f; } #animation-01{ position: absolute; } .cls-3 { opacity: 0.9; } .cls-4 { opacity: 0.8; } .cls-5 { opacity: 0.7; } .cls-6 { opacity: 0.5; } .cls-7 { opacity: 0.3; } .cls-8 { opacity: 0.1; } /* =Navigation */ nav { display: none; position: fixed; right: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; z-index: 100; } nav a { display: block; line-height: 25px; position: relative; padding-right: 20px; color: #ffffff; text-decoration: none; } nav a:hover .nav-label { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } nav .nav-dot { display: block; width: 10px; height: 10px; position: absolute; right: 0; top: 50%; background-color: rgba(255, 255, 255, 0.5); border-radius: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } nav .nav-label { display: block; opacity: 0.5; visibility: hidden; -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); -webkit-transition: all 0.2s cubic-bezier(.17, .67, .83, .67); transition: all 0.2s cubic-bezier(.17, .67, .83, .67); } nav.is-dark a { color: #1F1645; } nav.is-dark .nav-dot { background-color: #1F1645; } nav ul { margin: 0; padding: 0; } nav li { width: auto; list-style: none; } .scroll-hint { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* =Main */ .fs { height: 100vh; } .slide { color: #ffffff; position: relative; } .slide .wrapper { padding-top: 120px; text-align: center; } .slide#slide01 { background: #1F1645; } .slide#slide02 { background: #1F1645; } .slide#slide03 { color: #212121; background: #632c2d; background: -webkit-gradient(left top, left bottom, color-stop(0%, #e6e9ed), color-stop(100%, #ffffff)); background: -webkit-linear-gradient(top, #e6e9ed 0%, #ffffff 100%); background: linear-gradient(to bottom, #e6e9ed 0%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e9ed', endColorstr='#ffffff', GradientType=0 ); } .slide#slide03 .button { border-color: rgba(0, 0, 0, 0.7); color: #212121; } .slide#slide03 .button:hover { border-color: #212121; background-color: #212121; color: #ffffff; } .slide#slide04 { background-color: #be4c2c; } .button { text-decoration: none; color: #ffffff; border: 1px rgba(255, 255, 255, 0.7) solid; padding: 8px 15px; margin-top: 15px; display: inline-block; position: relative; } .button:hover { border-color: #ffffff; background-color: #ffffff; color: #000000; -webkit-transition: background-color 1s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out; } /* =Footer */ .footer-container { text-align: right; background-color: #1F1645; padding: 0 10%; } .footer-container h3 { font-size: 0.8em; color: #37A6DE; margin: 0; padding: 20px 0; font-weight: 100; } .footer-container a { color: #FEFEFE; } /* =Simple animation up */ .no-touch .slideInUp { visibility: hidden; opacity: 0; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); } .no-touch .is-active .slideInUp { visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width: 768px) { .wrapper { width: 80%; margin: 0 10%; } .section-left { float: left; width: 100%; } .section-right { float: right; width: 100%; } } @media only screen and (min-width: 768px) { h1 { font-size: 2.5em } /* =Header */ .header-container .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; padding: 0; } .section-left { float: left; width: 35%; margin-right: 5%; } .section-intro { text-align: left; width: 35%; margin-right: 5%; } .section-right { float: right; width: 50%; margin: 0 5%; } .slide .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: left; } nav { display: block; } } /* ========================================================================== Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } $(function() { // Setup variables var ctrl = new ScrollMagic.Controller(); var timeline01 = new TimelineMax(); var $rect_01 = $(".rect_01"), $rect_02 = $(".rect_02"), $rect_03 = $(".rect_03"), $rect_04 = $(".rect_04"), $rect_05 = $(".rect_05"), $rect_06 = $(".rect_06"), $rect_07 = $(".rect_07"); // Animate equal sign and fade out timeline01 .to($rect_01, 1, {rotation:-90, transformOrigin: "middle center", ease:Power2.easeOut}) .to($rect_02, 0.5, {scale: 1.5, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_02, 0.3, {scale: .5, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_03, 0.5, {scale: 1.4, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_03, 0.3, {scale: 0.4, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_04, 0.5, {scale: 1.3, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_04, 0.3, {scale: 0.3, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_05, 0.5, {scale: 1.2, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_05, 0.3, {scale: 0.2, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_06, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_06, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) .to($rect_07, 0.5, {scale: 1.1, transformOrigin: "middle center", ease:Power2.easeOut, delay:-0.4}) .to($rect_07, 0.3, {scale: 0.1, autoAlpha: 0, transformOrigin: "middle center", ease:Power2.easeIn, delay:-0.4}) ; // Scene 01 var scene01 = new ScrollMagic.Scene({ duration: 800, offset: 50, reverse: true, triggerElement: "body", triggerHook: 0, }) .addIndicators() .setTween(timeline01) .addTo(ctrl); });
