Depot43-Unterlagen - TimelineLiteStagger

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/easing/EasePack.js"></script> <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
	  div.container {
	  	width:50%;
		margin: 0 auto;
		border: 1px solid grey;
		min-width:270px;
	  }
	  div.red {
	  	width:100%;
		height: 4px;
		background-color: red;
	  }
	  div.blue {
	  	width:100%;
		height: 4px;
		background-color:blue;
	  }
	  div.grey {
	  	width:100%;
		height: 4px;
		background-color: grey;
	  }
	 div.steuerung {
	  	margin:6px;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div class="container">
		<div class="steuerung">
			<button onclick="myLamelle.restart()">Starten</button>
			<button onclick="myLamelle.paused(true)">Stopp</button>
			<button onclick="myLamelle.resume()">Weiter</button>
			<button onclick="myLamelle.reverse()">Zurück</button>
		</div>
		<div class="box red"></div>
		<div class="box blue"></div>
		<div class="box grey"></div>
	</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
      	var myLamelle = new TimelineLite();
	myLamelle.staggerTo(".box", 2, { y:"+=1",height:"+=100", ease:Bounce.easeOut}, 3); 
  
  </script>
</body>
</html>




            

Hinweis

Die Methode "stagger()" spielt die Animationen der Reihe nach ab. Sie bedingt eine TweenLite oder TweenMax Animation, die mit "staggerTo" aufgerufen wird.

   var myLamelle = new TimelineLite();
   myLamelle.staggerTo(".box", 2, { y:"+=1",height:"+=100", ease:Bounce.easeOut}, 3);

Je nach Art der Animation, müssen TweenLite (Motor), CSSPlugin und EasePack geladen werden.

GSAP - TimelineLiteStagger

Hinweis