GSAP - TimelineLiteInvalidate

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

Hinweis - invalidate() - isActive()

Das auf der x-Achse bewegte Objekt fährt mit jedem Klick 50 Pixel weiter:

 mytl.add( TweenLite.to(cube, 1, {left:"+=50"}) );

Die Methode "invalidate()" kummuliert die Werte der Animation bei jedem Neustart.

        mytl.invalidate();
        mytl.restart();

Die Methode "isActive()" verhindert, dass während der laufenden Animation geklickt werden kann und zeigt dies an:

     if(mytl.isActive()){
           cube.textContent = " Active";
     }

Die Methode "onComplete()" führt dir Funktion "countreset" aus:

mytl.add( TweenLite.to(cube, 3, {left:0, onComplete:countreset}) );

Der Counter wieder zurückgesetzt, so kann der Klick erneut hochgezählt werden.

     function countreset() {
         count = 0;
        cube.textContent = count+" Klicks";
     }