Depot43-Unterlagen

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/easing/EasePack.js"></script> <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/utils/Draggable.js"></script> <script src="https://depot43.ch/unterlagen/themes/greensock/javascript/gsap/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
	  #kreis {
	  	left:0;
	  	width:100px;
		  height:100px;
		  background-color: #ef2e3e;
		  border-radius:50px;
	  }
  </style>
  </head>

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

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
          var kreisGo = document.getElementById("kreis");
	TweenLite.to(kreisGo, 2, {width:"200px", height:"200px","border-radius":"100px", ease:Bounce.easeOut });
	  
	Draggable.create(kreisGo);
  
  </script>
</body>
</html>




            

Hinweis

In diesem Beispiel sind "TweenLite" als "Motor" der Animation, "EasePack" für die Bounce-Bewegung, "Draggable" um den Kreis ziehen zu können und "CSSPlugin" um CSS-Werte animieren zu können.

<script src="gsap/TweenLite.js"></script> 
 <script src="gsap/easing/EasePack.js"></script> 
<script src="gsap/utils/Draggable.js"></script> 
<script src="gsap/plugins/CSSPlugin.js"></script>

GSAP - Plugins

Hinweis