GSAP Timeline
Wann man diesen Skill verwendet
Anwenden, wenn mehrstufige Animationen erstellt, mehrere Tweens in Sequenz oder parallel koordiniert werden sollen, oder wenn der Benutzer nach Zeitachsen (Timelines), Sequenzierung oder Keyframe-artigen Animationen in GSAP fragt.
Verwandte Skills: Für einzelne Tweens und Easing-Funktionen verwende gsap-core; für scrollgesteuerte Timelines verwende gsap-scrolltrigger; für React verwende gsap-react.
Erstellen einer Timeline
const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 })
.to(".b", { y: 50, duration: 0.5 })
.to(".c", { opacity: 0, duration: 0.3 });
Standardmäßig werden Tweens nacheinander angehängt. Verwende den Positionsparameter, um Tweens zu bestimmten Zeitpunkten oder relativ zu anderen Tweens zu platzieren.
Positionsparameter
Das dritte Argument (oder die position-Eigenschaft in den Vars) steuert die Platzierung:
- Absolut:
1— starte bei 1 Sekunde. - Relativ (Standard):
"+=0.5"— 0,5s nach Ende;"-=0.2"— 0,2s vor Ende. - Label:
"labelName"— bei diesem Label;"labelName+=0.3"— 0,3s nach dem Label. - Platzierung:
"<"— starte, wenn die zuletzt hinzugefügte Animation startet;">"— starte, wenn die zuletzt hinzugefügte Animation endet (Standard);"<0.2"— 0,2s nach dem Start der zuletzt hinzugefügten Animation.
Beispiele:
tl.to(".a", { x: 100 }, 0); // bei 0
tl.to(".b", { y: 50 }, "+=0.5"); // 0,5s nach letztem Ende
tl.to(".c", { opacity: 0 }, "<"); // gleicher Start wie vorheriger
tl.to(".d", { scale: 2 }, "<0.2"); // 0,2s nach vorherigem Start
Timeline-Standardwerte
Standardwerte an die Timeline übergeben, sodass alle Kind-Tweens diese erben:
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // beide verwenden 0,5s und power2.out
Timeline-Optionen (Konstruktor)
- paused: true — pausiert erstellen; mit
.play()starten. - repeat, yoyo — wie bei Tweens; auf die gesamte Timeline anwenden.
- onComplete, onStart, onUpdate — Callbacks auf Timeline-Ebene.
- defaults — Vars, die in jeden Kind-Tween eingefügt werden.
Labels
Labels für lesbare, wartbare Sequenzen hinzufügen und verwenden:
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.to(".b", { opacity: 0 }, "outro");
tl.play("outro"); // ab "outro" starten
tl.tweenFromTo("intro", "outro"); // pausiert die Timeline und gibt einen neuen Tween zurück, der den Abspielkopf der Timeline von intro bis outro ohne Easing animiert.
Verschachteln von Timelines
Timelines können andere Timelines enthalten.
const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
master.to(".c", { opacity: 0 }, "+=0.2");
Wiedergabesteuerung
- tl.play() / tl.pause()
- tl.reverse() / tl.progress(1) dann tl.reverse()
- tl.restart() — von Anfang.
- tl.time(2) — zu 2 Sekunden springen.
- tl.progress(0.5) — zu 50% springen.
- tl.kill() — Timeline und (standardmäßig) ihre Kinder beenden.
Offizielle GSAP Best Practices
- ✅ Timelines für Sequenzierung bevorzugen
- ✅ Den Positionsparameter (drittes Argument) verwenden, um Tweens zu bestimmten Zeitpunkten oder relativ zu Labels zu platzieren.
- ✅ Labels mit
addLabel()für lesbare, wartbare Sequenzierung hinzufügen. - ✅ Defaults in den Timeline-Konstruktor übergeben, damit Kind-Tweens Dauer, Easing usw. erben.
- ✅ ScrollTrigger auf der Timeline (oder dem Top-Level-Tween) platzieren, nicht auf Tweens innerhalb einer Timeline.
Nicht tun
- ❌ Animationen mit delay verketten, wenn eine Timeline sie sequenzieren kann; für mehrstufige Animationen
gsap.timeline()und den Positionsparameter bevorzugen. - ❌ Vergessen, defaults zu übergeben (z. B.
defaults: { duration: 0.5, ease: "power2.out" }), wenn viele Kind-Tweens dieselbe Dauer oder dasselbe Easing teilen. - ❌ Vergessen, dass die duration im Timeline-Konstruktor nicht dasselbe ist wie die Tween-Dauer; die Timeline-„duration" wird durch ihre Kinder bestimmt.
- ❌ Animationen verschachteln, die einen ScrollTrigger enthalten; ScrollTrigger sollten nur auf Top-Level-Tweens/Timelines sein.