Depot43-Unterlagen - TweenLite fromTo

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:50px;
		height:50px;
		background-color:red;
	}
	#Blue {
	  	width:50px;
		height:50px;
		background-color:blue;
	}
	#Grey {
	  	width:50px;
		height:50px;
		background-color:grey;
	}
  </style>
  </head>

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

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
  	TweenLite.fromTo(Red, 5, {x:100}, {x:500});
	TweenLite.fromTo(Blue, 5, {x:300}, {x:100});
	TweenLite.fromTo(Grey, 5, {x:0}, {x:300});
  
  </script>
</body>
</html>




            

Hinweis:

Mit "TweeLite.fromTo()" wird die Startposition und die Zielposition eingegeben. Beim Start der Animation wird der fromVars-Wert übernommen.

TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) :

GSAP - TweenLite fromTo

Hinweis: