Animation mit Greensock

Die JS-Bibliotheken von Greensock lassen sich über das Plugin „Insert Header ans Footer“ leicht einbinden. Der Code der Animation wird aufgeteilt:

  • CSS muss im Editor-CSS oder in der Theme-Erweiterung platziert werden
  • Der JS-Code der Animation gehört dann in den Quelltext der jeweiligen Seite.

Im head-Bereich:
<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js“></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/CSSPlugin.min.js“></script>

Im CSS-Editor:
icon{
position: relative;
width:100px;
height:100px;
background-color: #6D411D;
box-shadow:2px 2px 5px black;
}

Im HTML-Coder der Seite:
<p id=“icon“></p>
<script>
var icon = document.getElementById(„icon“);
TweenLite.to(icon, 4, {width:500, rotation:360, left:400, top:-10});
</script>