Depot43-Unterlagen - TimelineLiteInvalidate

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 Klicks</div>
	<div class="steuerung">
		<button onclick="weiter()">Immer weiter ...</button>
	</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
        	  var mytl = new TimelineLite();
	  mytl.add( TweenLite.to(cube, 1, {left:"+=50"}) );
		
	  var count = 0;
		
	  function weiter() {
		  if (count == 6) {
			mytl.add( TweenLite.to(cube, 3, {left:0, onComplete:countreset}) );
				 if(mytl.isActive()){
					cube.textContent = " Active";
				 } 
		} else {
			mytl.invalidate();
			mytl.restart();
			count +=1;
			cube.textContent = count+" Klick";
		}
	 }
	  
	 function countreset() {
		 count = 0;
		cube.textContent = count+" Klicks";
	 }
  
  </script>
</body>
</html>




            

Hinweis - invalidate() - isActive()

Das auf der x-Achse bewegte Objekt fährt mit jedem Klick 50 Pixel weiter:

 mytl.add( TweenLite.to(cube, 1, {left:"+=50"}) );

Die Methode "invalidate()" kummuliert die Werte der Animation bei jedem Neustart.

        mytl.invalidate();
        mytl.restart();

Die Methode "isActive()" verhindert, dass während der laufenden Animation geklickt werden kann und zeigt dies an:

     if(mytl.isActive()){
           cube.textContent = " Active";
     }

Die Methode "onComplete()" führt dir Funktion "countreset" aus:

mytl.add( TweenLite.to(cube, 3, {left:0, onComplete:countreset}) );

Der Counter wieder zurückgesetzt, so kann der Klick erneut hochgezählt werden.

     function countreset() {
         count = 0;
        cube.textContent = count+" Klicks";
     }

GSAP - TimelineLiteInvalidate

Hinweis - invalidate() - isActive()