Code Elemente - HTML - CSS - JS
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
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"});