GSAP - TweenLite Start

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
Code Elemente - HTML - CSS - JS

Hinweis:

Für einen Tween der CSS-Eigenschaften transformiert werden zwei Bibliotheken eingelinkt:

<script src="http://depot43.ch/unterlagen/themes/greensock/javascript/gsap/TweenLite.js"></script> 
<script src="http://depot43.ch/unterlagen/themes/greensock/javascript/gsap/plugins/CSSPlugin.js"></script>

TweenLite.js > Transformiert die Objekte

CSSPlugin.js > ermöglicht die Transformation der CSS-Eigenschaften


CSS - formatiert das Objekt beim laden der Seite:

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

HTML - Das Objekt trägt die ID "kreis":

    <div id="kreis"></div>

JS - tweent das Objekt:

    var kreisGo = document.getElementById("kreis");
    TweenLite.to(kreisGo, 2, {width:"200px", height:"200px","border-radius":"100px"});