Depot43-Unterlagen - TimelineLightAnzeige

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:0;
		  padding:0;
	  }
	  #redcube {
		  position: relative;
		  left:10px;
		  top:0;
		  width:100px;
		  height:100px;
		  background:red;
		  opacity:0;
	  }

	  #redborder {
		  position:absolute;
		  top:20px;
		  left:10px;
		  width:99px;
		  height:99px;
		  border: 1px solid red;
	  }
	  div.steuerung {
		  position:relative;
		  top:100px;
		  border: 1px solid grey;
		  width:255px;
	  }
	  div#anzeige {
		  position:relative;
		  width:1px;
		  height:10px;
		  background-color:red;
		  margin-bottom:30px;
	  }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
		<p id="redcube"></p>
		<p id="redborder"></p>

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

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
    	  var mytl = new TimelineLite();
	  mytl.add( TweenLite.to(redcube, 1, {opacity:1}) );
	  mytl.add( TweenLite.to(redcube, 2, {left:110}) );
	  mytl.add( TweenLite.to(redcube, 2, {top:100}) );
	  mytl.add( TweenLite.to(redcube, 1, {opacity:0}) );
	  mytl.add( TweenLite.to(redcube, 1, {opacity:1}) );
	  mytl.add( TweenLite.to(redcube, 2, {left:10}) );
	  mytl.add( TweenLite.to(redcube, 2, {top:0}) );
	  mytl.add( TweenLite.to(redcube, 1, {opacity:0}) );

	  var anz = new TimelineLite();
	  anz.add( TweenLite.to(anzeige, mytl.duration(), {width:255, ease:Linear.easeNone}) );
  
  </script>
</body>
</html>




            

Hinweis - Anzeige

Im Browser lässt sich eine Greensock-Animation einfach überwachen. Mit "Element untersuchen" kann das animierte Objekt markiert werden und so die dynamischen Werte in den CSS-Regeln verfolgt und editiert werden.

Eine zusätzliche Übersicht bietet wenn eine zusätzliche Timline (anz) für die Anzeige gebaut wird.

      var anz = new TimelineLite();
      anz.add( TweenLite.to(anzeige, mytl.duration(), {width:255, ease:Linear.easeNone}) );

Dieser Anzeigebalken soll die Laufzeit der gesamten Animation (mytl) zwischen 0% und 100% darstellen. Die Methode mytl.duration() wird als "End"-Wert eingegeben.

Damit kein "Easing" die Anzeige verzerrt, muss ease:Linear.easeNone angehängt werden.

GSAP - TimelineLightAnzeige

Hinweis - Anzeige