Depot43-Unterlagen - TimelineLightOnComplete

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;
		}

	#cube {
		position: relative;
            	width:100px;
            	height:100px;
		}
        .red {
            	background-color:red;
        }
        .blue {
            	background-color:blue;
        }
        .yellow {
            	background-color:yellow;
            	border-left:4px solid orange;
            	margin-left:-4px;
        }
        .darkgreen {
           	 background-color:darkgreen;
        }
        #mytext {
           	position:absolute;
            	width:260px;
            	top:10px;
            	right:10px;
            	opacity:0;
        }
  </style>
  </head>

<!-- HTML *************************** -->
<body>
	<div id="cube" class="red"></div>
	<div id="cube" class="blue"></div>
	<div id="cube" class="yellow"></div>
	<div id="cube" class="darkgreen"></div>
	<div id="mytext">Die Funktion "onComplete:myText" wird gestartet wenn das Objekt "#cube.darkblue" das Ende der Timeline erreicht hat. </div>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
  	  var mytlRed = new TimelineLite();
	  mytlRed.add( TweenLite.fromTo(".red", 2, {opacity:0}, {opacity:1}) );
	  mytlRed.add( TweenLite.fromTo(".red", 2, {left:0}, {left:110}) );
	  mytlRed.add( TweenLite.fromTo(".red", 2, {rotation:0}, {rotation:180}) );

	  var mytlBlue = new TimelineLite();
	  mytlBlue.add( TweenLite.fromTo(".blue", 1, {opacity:0}, {opacity:1}) );
	  mytlBlue.add( TweenLite.fromTo(".blue", 5, {width:100}, {width:210}) );
	  mytlBlue.add( TweenLite.fromTo(".blue", 1, {opacity:1}, {opacity:0}) );

	  var mytlYellow = new TimelineLite();
	  var calcwidth = "100vw";
	  mytlYellow.add( TweenLite.fromTo(".yellow", 2, {left:"0"}, {left:calcwidth}) );
	  mytlYellow.add( TweenLite.fromTo(".yellow", 3, {width:100}, {width:210}) );
	  mytlYellow.add( TweenLite.fromTo(".yellow", 2, {left:calcwidth}, {left:"0"}) );

	  var mytlDarkgreen = new TimelineLite({onComplete:myText});
	  mytlDarkgreen.add( TweenLite.fromTo(".darkgreen", 4, {width:"1px", height:"1px"}, {width:"100px", height: "100px"}) );
	  mytlDarkgreen.add( TweenLite.fromTo(".darkgreen", 4, {border: "4px solid red", backgroundColor:"green"}, {border: "4px solid white", backgroundColor:"purple"}) );

	  function myText () {
		  var mytxt = new TimelineLite();
		  mytxt.add( TweenLite.fromTo("#mytext", 4, {opacity:0}, {opacity:1}) );
	  }
  
  </script>
</body>
</html>




            

Hinweis - OnComplete

Wenn eine Timline erstellt wird, kann die "onComplete"-Methode direkt angehängt werden.

var mytlDarkgreen = new TimelineLite({onComplete:myText});

GSAP - TimelineLightOnComplete

Hinweis - OnComplete