Depot43-Unterlagen - TimelineLiteEndlos

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>
	#cube {
		position: relative;
            	width:100px;
            	height:100px;
		}
        .red {
            	background-color:red;
		text-align:center;
        }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
 
	<div id="cube" class="red">0 x</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
      	 var redcube = document.getElementById("cube");
  	var mytl = new TimelineLite({onComplete:endless});
	  
	mytl.to(redcube, 2, {x:500})
		.to(redcube, 1, {x:"1=15"})
		.to(redcube, 2, {y:"+=200"})
	 	.to(redcube, 1, {y:"-=200"})
	  	.to(redcube, 1, {x:0})
	  	.to(redcube, 1, {});
		
	  var count = 0;
		
	  function endless() {
		mytl.restart();
		count +=1;
		redcube.textContent = count+" x";
	 }
  
  </script>
</body>
</html>




            
GSAP - TimelineLiteEndlos
