GSAP - TimelineLightAnzeige

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

Hinweis - Anzeige

Im Browser lässt sich eine Greensock-Animation einfach überwachen. Mit "Element untersuchen" kann das animierte Objekt markiert werden und so die dynamischen Werte in den CSS-Regeln verfolgt und editiert werden.

Eine zusätzliche Übersicht bietet wenn eine zusätzliche Timline (anz) für die Anzeige gebaut wird.

      var anz = new TimelineLite();
      anz.add( TweenLite.to(anzeige, mytl.duration(), {width:255, ease:Linear.easeNone}) );

Dieser Anzeigebalken soll die Laufzeit der gesamten Animation (mytl) zwischen 0% und 100% darstellen. Die Methode mytl.duration() wird als "End"-Wert eingegeben.

Damit kein "Easing" die Anzeige verzerrt, muss ease:Linear.easeNone angehängt werden.