Jump to content
Search Community

TimelineMax not reversing on scroll

pbod test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

});

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Looks like this is a problem with ScrollMagic. Have you tried reaching out to their support team?

 

Even though ScrollMagic isn't a GreenSock product there is a chance someone here will be able to give you some ideas.

Unfortunately, it isn't very practical for us to read through all that code and try to imagine what may or may not be working.

Please provide a simple CodePen (or plunkr, or jsFiddle, jsbin etc) demo so that we can better see what is happening as described here: 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Link to comment
Share on other sites

Hi @pbod :)

 

You need one more script to allow ScrollMagic to take control of the tweens:

 

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js

 

Your pen is also loading two different versions of TweenMax and two different versions of jQuery. It's best to load the scripts via the JS panel on CodePen instead of in the HTML panel. You also don't need the <head> and <body> tags on CodePen. There is an error in your target on line 39. You have a target name of $text_green, but the actual variable name is text_green. 

 

I'm not sure if loading that extra script and making those corrections will solve all your problems, but it should get you pointed in the right direction. 

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...