translate GSAP

Weiche, schnelle und browserübergreifende HTML5-Animationen. Detaillierte Kontrolle über den zeitlichen Ablauf.

Rechts eine Animation mit ease:Elastic.easeOut, vor und zurück.

Beim zweiten Besipiel laufen die Verkleinerung und die Bewegung des kleinen Kästchens gleichzeitig ab, die Bewegung des Logos startet danach. Bei der Bewegung des Logos wird bei jedem Bewegungsschritt ein neues Kästchen mit leichtem Versatz erzeugt.

Beim dritten Besipiel wird das Logos mit ease:Power4.easeOut und jojo-Effekt für hin und zurück waagerecht bewegt. Die Animation läuft dreimal ab.

Los!
zurück
elastic
Los!
zurück
Verzögerung
Los!
neu starten
jojo

Gleiche Animation für mehrere Elemente nacheinander, mit gleichem Klassennamen als Array übergeben. Leichte zeitliche Überschneidung der Animationen (die Animation des folgenden Kästchens startet vor Ablauf der Animation des davorliegenden Kästchens), Rückstellung mit completeHandler und anderen Parametern.

Los! (und neu starten)

Array mit Worten, das die einzelnen Elemente von links oben relativ zum Element mit Deckkraft 0, einem Winkel von 60 Grad und einer Vergrößerung von 1.8 mit ease:Back.easeOut zum Normalzustand animiert. Die Geschwindigkeit ist per Auswahlfeld einstellbar.

Timelite Abfolge (Array mit spans) mit Drehen!
Los! (und neu starten)
zurück

Bei Klick auf den Button "Eigenschaften" werden Parameter vor/nach dem Auslösen der Funktion angezeigt.

"Drehen" zeigt ein mehrfaches Drehen entlang einer Geraden mit anschließendem Wegfaden. Die Animation läuft zweimal ab.

Eigenschaften
Drehen

Beim Auslösen vom Button "eckig" steuert das Kästchen mit leichtem Auslaufen der Gescheindigkeit auf geradem Weg festgelegte Eckpunkte an.

Beim Auslösen des Button "rund" steuert das Kästchen dieselben Eckpunkte mit einer Bezierkurve (Tangente Stärke 1.25) an.

Bei "nervös" werden dieselben Eckpunkte benutzt und die Tangente mit -10 gegenläufig überzogen, wodurch ausschweifende Kurvenwege entstehen. Da die Wege deutlich länger sind und die Länge der Gesamtanimation gleichbleibt, läuft das Kästchen entsprechend schneller.

eckig
rund
nervös

Hier werden zwei Drehbewegungen kombiniert, die einzeln zu- und abgeschaltet werden können. Beim ersten Button führt das Element eine zweidimensionale Kreisbewegung aus, beim dritten Button dreht sich das Element mit Vor- und Rückseite um sich selber. Die anderen beiden Buttons stoppen die jeweiliegen Bewegungen.

front
back

Aufbau eines perspektivischen Raums. Durch Klick auf den ersten Button werden die Kästchen um die y-Achse vor- bzw. zurückgedreht, beim zweiten um die x-Achse.

Der dritte Button läßt vier Reihen, die mit verschiedener Tiefe im Raum stehen, á 4 Kästchen im Raum kreisen, zwei Reihen kreisen waagerecht und zwei senkrecht. Ein nochmaliges Klicken des Buttons pausiert die Animation, ein Klick auf den vierten Button macht sie unsichtbar.

Die Buttons 200 bis 400 verändern die Raumtiefe, die Wand- und die kreisenden Buttons reagieren darauf.

ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
ABC
Ralf Schmidt
Bonner Straße 19
40589 Düsseldorf
Telefon:  0211  79 48 41 4
Mobil:  0178  64 52 52 7
Struktur
Aufbau
Tools
Softscroll/Slider • Karteikarten • Zoom/Lupe
Versetztes Scrollen • translate css, js
translate GSAP • Scrollbalken, Silbentrennung
Diese Seite ist nicht öffentlich
und dient nur privaten Testzwecken