Depot43-Unterlagen - TimelineLite

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 {
		  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;
        }
  </style>
  </head>

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

  <!-- 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}) );
  
  </script>
</body>
</html>




            

Hinweis

Für die Anwendung von "TimelineLite" muss vorab "TimlineLight" als Motor geladen werden. Für die CSS-Eigenschaften das CCS-Plugin.

Die Timeline kann verschiedene Bewegungen hintereinander ausführen.

GSAP - TimelineLite

Hinweis