GSAP - Greensock

Resourcen:

TweenLite Easing Pack Plugin: CSS Propertys DOM

Download mit "customizer": https://greensock.com/gsap > Download-Button (CDN - Robust - Light - Customize - Versionen)

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

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/plugins/CSSPlugin.js"></script> 

  <!-- CSS *************************** -->
  <style>
	#icon {
	    position: relative;
            width:100px;
            height:100px;
            background-color: #EF2E3E;
	}
  </style>
  </head>

<!-- HTML *************************** -->
<body id="myBG">
 <p id="icon"></p>

  <!-- Javascript ************************ -->
  <script type="text/javascript">
  
    	 var icon = document.getElementById("icon");
 	TweenLite.to(icon, 4, {width:400, rotation:360, left:400, top:100, ease:Bounce.easeOut, delay:1});

	TweenLite.to("#myBG", 4, {backgroundColor:"#EF2E3E", width:"50%", top:"100px", ease:Power2.easeInOut, delay:3});

  
  </script>
</body>
</html>




            

Hinweis:

Greensock stellt sich selbst vor als: GSAP - Ultra high-performance, professional-grade animation for the modern web.

Das ganze Animations-Tool besteht aus meheren Bibliotheken und Plugins. Die Grundlage ist die JS-Bibliothek "tweenlite.js".Durch das verlinken der Bibliotheken stehen deren Funktionen zur Verfügung.

Das auf GitHub zum Download angeboteten Paket:

TweenLite (9kb)
TweenMax (36kb)
TimelineLite (4kb)
TimelineMax (6kb)

Extras

EasePack (2kb)
jquery.gsap.js (2kb)
Draggable (12kb)

Plugins

css (15kb)
scrollTo (1kb)
bezier (4kb)
pixi (3kb)
modifiers (1kb)
colorProps (1kb)
directionalRotation (1kb)
cssRule (1kb)
attr (1kb)
easel (3kb)
text (1kb)
roundProps (1kb)

Weitere Bibliotheken werden Mitgliedern vom "Greensock Club" angeboten oder sind Zahlungpflichtig. Viele davon sind auf den Umgang mit SVG zugeschnitten.