Depot43-Unterlagen - TimelineLightVarFunction

Code Elemente - HTML - CSS - JS

            
            

<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>GSAP - Greensock</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">


<script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/TweenLite.js"></script> <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/TimelineLite.js"></script>  <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
	body {
		background-color: #ccc;
            	margin:-20px 0 0 0;
            	padding:0;
		}
	#red, #blue {
		position: relative;
            	width:100px;
            	height:100px;
		}
	#yellow, #green {
		  position: relative;
		  width:98px;
		  height:98px;
		}
        .red {
            	background-color:red;
        }
        .blue {
            	background-color:blue;
        }
        .yellow {
            	background-color:yellow;
            	border:1px solid red;
		border-bottom:none;
        }
        .darkgreen {
           	 background-color:darkgreen;
		border:1px solid red;
		border-top:none;
        }
	button {
	  	width: 100px;
		height:30px;
	}
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div id="red" class="red"></div>
	<div id="blue" class="blue"></div>
	<div id="yellow" class="yellow"></div>
	<div id="green" class="darkgreen"></div>
	<button id="restart">Restart</button>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
  	var red = document.getElementById("red"),
	      blue = document.getElementById("blue"),
	      yellow =  document.getElementById("yellow"),
	      green = document.getElementById("green")
	  
	var mytl = new TimelineLite({onComplete:any});
	  
	mytl.to(red, 2, {x:500})
		.to(blue, 1, {x:"1=75"})
		.to(yellow, 1, {y:"-=200"}, "-=1")
		.to(green, 1, {y:"-=200"}, "-=1");

	 restart.onclick = function() {
		mytl.restart();
	  }
	 function any() {
		mytl.reverse();
	 }
  
  </script>
</body>
</html>




            

Hinweis: Variablen/Arrays und Funktionen

Es gibt viele verschiedene Schreibweisen um HTML-Elemente in Javascript zu referenzieren.

Hilfreich ist es, eine ID für das Objekt, eine Klasse für die Gestaltung zu verwenden:

    <div id="red" class="red"></div>
    <div id="blue" class="blue"></div>
    <div id="yellow" class="yellow"></div>
    <div id="green" class="darkgreen"></div>

Für den Aufruf kann eine Variable (ein Objekt) oder ein Array (viele Objekte) verwendet werden:

    var red = document.getElementById("red"),
          blue = document.getElementById("blue"),
          yellow =  document.getElementById("yellow"),
          green = document.getElementById("green")

Die Timeline wird erstellt, mit einer Kunktion die am Ende ausgeführt wird:

var mytl = new TimelineLite({onComplete:any});

Mit der Methode "to" werden die einzelnen Objekte animiert. Konkateniert werden die Objekte nacheinander abgespielt (sie liegen alle auf der selben Timeline hintereinander).

    mytl.to(red, 2, {x:500})
        .to(blue, 1, {x:"1=75"})
        .to(yellow, 1, {y:"-=200"})
        .to(green, 1, {y:"-=200"});

Da in diesem Fall das gelbe und das grüne Objekt nicht getrennt animert werden sollen, muss ein "Position Parameter" (rot) zusätzlich angewendet werden.

    mytl.to(red, 2, {x:500})
        .to(blue, 1, {x:"1=75"})
        .to(yellow, 1, {y:"-=200"}, "-=1")
        .to(green, 1, {y:"-=200"}, "-=1");

Weitere Informationen auf greensock.com: Timeline > Positon Parameter

GSAP - TimelineLightVarFunction

Hinweis: Variablen/Arrays und Funktionen