GSAP - TweenLite Funktionen

Hinweis - Schreibweisen

Die Werte und Eigenschaften einer GSAP-Animation können auf mehrere Arten eingegeben werden:

Übergabe der HTML-Elemnte

Die ID des HTML-Elements wird direkt aufgerufen:

TweenLite.to(Red, 5, {x:500});

Die Klasse meherer Objekte wird direkt aufgerufen:

TweenLite.to('.allebilder', 5, {x:500});

Die ID's werden als Array direkt aufgerufen

TweenLite.to([Red,Blue,Grey], 5, {x:500});

Eigenschaften und Werte

Es können mehere Eigenschaften und Werte als Array eingetragen werden:

TweenLite.to(Red, 2, {width:"200px", height:"200px","border-radius":"100px"});

Es können mehere Eigenschaften und Werte (.fromTo) als Array eingetragen werden {from}, {to}:

TweenLite.fromTo([Red,Blue,Grey], 5, {x:0}, {x:500});

 Funktions basierende Werte

Die Eingabe der Eigenschaften und Werte können innerhalb einer Funktion geschrieben werden. Das bietet sich an, wenn die Werte dynamisch verändert werden.

 TweenLite.to(".bilder", 2, {
         x: function() {
            return Math.random() * 500;
        },
        opacity: function() {
            return 0.5;   
        },
    });

Die Animation als Funktion

Wenn eine Animation mit einer Steuerung angesprochen wird, muss diese innerhalb einer Funktion stehen.

Funktionsaufruf:

onclick="go(event)"

Funktion und Parameter:

    function go(event){
        myTween = new TweenLite(event.target, 1.5, {rotation:180,  scale:2});
    }

Die Animation als Variable

Die Objekte können in einer Variable abgelegt und in einer Animation ausgewertet werden:

     var myicon = document.getElementById("icon");
     TweenLite.to(myicon, 4, {width:400, rotation:360});

Die Animation kann als Variable geschrieben werden (Aufruf und Animation):

 onclick="Figur.restart(true)"

var Figur = new  TweenLite.fromTo(".bilder", 2, { opacity:0, delay:1});