GSAP Performance
Wann dieses Skill verwendet werden sollte
Anwenden bei der Optimierung von GSAP-Animationen für flüssige 60fps, Reduzierung von Layout-/Paint-Kosten oder wenn der Benutzer nach Performance, Rucklern oder Best Practices für schnelle Animationen fragt.
Verwandte Skills: Baue Animationen mit gsap-core (transforms, autoAlpha) und gsap-timeline; für ScrollTrigger-Performance siehe gsap-scrolltrigger.
Transform und Opacity bevorzugen
Das Animieren von transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) und opacity hält die Arbeit auf dem Compositor und vermeidet Layout und die meisten Paint-Vorgänge. Vermeide das Animieren layout-lastiger Eigenschaften, wenn ein Transform denselben Effekt erzielen kann.
- ✅ Bevorzugen: x, y, scale, rotation, opacity.
- ❌ Vermeiden, wenn möglich: width, height, top, left, margin, padding (sie lösen Layout aus und können Ruckler verursachen).
GSAPs x und y verwenden standardmäßig Transforms (translate); verwende sie anstelle von left/top für Bewegungen.
will-change
Verwende will-change in CSS auf Elementen, die animiert werden. Es gibt dem Browser einen Hinweis, die Ebene zu fördern.
will-change: transform;
Batch-Lesen und -Schreiben
GSAP fasst Updates intern zusammen. Wenn GSAP mit direktem DOM-Lesen/-Schreiben oder layoutabhängigem Code gemischt wird, vermeide das Verschachteln von Lese- und Schreibvorgängen, das wiederholtes Layout-Thrashing verursacht. Bevorzuge, alle Lesevorgänge zuerst durchzuführen, dann alle Schreibvorgänge (oder lasse GSAP die Schreibvorgänge auf einmal erledigen).
Viele Elemente (Stagger, Listen)
- Verwende stagger anstelle vieler separater Tweens mit manuellen Verzögerungen, wenn die Animation gleich ist; das ist effizienter.
- Für lange Listen erwäge Virtualisierung oder animiere nur sichtbare Elemente; vermeide hunderte gleichzeitige Tweens, wenn sie Ruckler verursachen.
- Verwende Timelines wo möglich wieder; vermeide, jede Frame neue Timelines zu erstellen.
Häufig aktualisierte Eigenschaften (z. B. Mausfolger)
Bevorzuge gsap.quickTo() für Eigenschaften, die oft aktualisiert werden (z. B. Mausfolger x/y). Es verwendet einen einzelnen Tween wieder, anstatt bei jeder Aktualisierung neue Tweens zu erstellen.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
ScrollTrigger und Performance
- pin: true fördert das angepinnte Element; pinne nur, was nötig ist.
- scrub mit einem kleinen Wert (z. B.
scrub: 1) kann die Arbeit während des Scrollens reduzieren; teste auf leistungsschwachen Geräten. - Rufe ScrollTrigger.refresh() nur auf, wenn sich das Layout tatsächlich ändert (z. B. nach dem Laden von Inhalten), nicht bei jeder Größenänderung; entprelle wenn möglich.
Gleichzeitige Arbeit reduzieren
- Pausiere oder beende Animationen außerhalb des Bildschirms oder inaktive Animationen, wenn sie nicht sichtbar sind (z. B. wenn der Benutzer zur anderen Seite navigiert).
- Vermeide, viele Eigenschaften auf vielen Elementen gleichzeitig zu animieren; vereinfache oder staffele bei Bedarf.
Best Practices
- ✅ Animiere transform und opacity; verwende will-change in CSS nur auf Elementen, die animiert werden.
- ✅ Verwende stagger anstelle vieler separater Tweens mit manuellen Verzögerungen, wenn die Animation gleich ist.
- ✅ Verwende gsap.quickTo() für häufig aktualisierte Eigenschaften (z. B. Mausfolger).
- ✅ Räume Animationen außerhalb des Bildschirms auf oder beende sie; rufe ScrollTrigger.refresh() bei Layout-Änderungen auf, entprellt wenn möglich.
Nicht tun
- ❌ Animiere width/ height/ top/ left für Bewegungen, wenn x/ y/ scale denselben Look erzielen können.
- ❌ Setze will-change oder force3D auf jedem Element „für alle Fälle“; verwende es nur für Elemente, die tatsächlich animiert werden.
- ❌ Erstelle hunderte überlappender Tweens oder ScrollTrigger ohne Test auf leistungsschwachen Geräten.
- ❌ Ignoriere die Bereinigung; verirrte Tweens und ScrollTrigger laufen weiter und können Performance und Korrektheit beeinträchtigen.