Depot43-Unterlagen - TweenLiteResume

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/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
	#Red {
	  	width:100px;
		height:100px;
		background-color:#EF2E3E;
	}
	  div.steuerung {
	  	margin-top:20px;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div id="Red"></div>

	<div class="steuerung">
		<button onclick="myTween.restart()">Starten</button>
		<button onclick="myTween.paused(true)">Stopp</button>
		<button onclick="myTween.resume()">Weiter</button>
		<button onclick="myTween.reverse()">Zurück</button>
	</div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
     	var myTween = TweenLite.fromTo("#Red", 4, {x:0},{x:500, ease:Linear.easeNone }); 
	  
	myTween.eventCallback("onComplete", myFunction); 
	function myFunction() {
		myTween.resume(0);
	};
  
  </script>
</body>
</html>




            

Hinweis

Wird die Methode "resume()" in einer Funktion, "onComplete" aufgerufen, ermöglicht dies, eine Animation fortwährend abspielen zu lassen.

Sie kann über einen Event aufgerufen werden (in einem Button):

onclick="myTween.resume()"

Sie kann auch in eine Funktion geschrieben werden. Hier wird die Funktion aufgerufen, wenn die Animation beebndet ist "onComplete".

    myTween.eventCallback("onComplete", myFunction); 
    function myFunction() {
        myTween.resume(0); 
    };

Der Wert der "resume(x)", entspricht der Zeit (Sekunde) der Animation. Dauert die gesamte Animation 4 Sekunden, wird mit "resume(2)" die zweite Hälfte der Animation gestartet.

GSAP - TweenLiteResume

Hinweis