GSAP Performance
Wann dieses Skill verwenden
Anwenden zur Optimierung von GSAP-Animationen für flüssige 60fps, Reduzierung von Layout-/Paint-Kosten oder wenn der Nutzer 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
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 die Animation layoutintensiver 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-Reads und -Writes
GSAP fasst Aktualisierungen intern zusammen. Wenn du GSAP mit direkten DOM-Reads/-Writes oder layoutabhängigem Code kombinierst, vermeide es, Reads und Writes so zu verschränken, dass wiederholtes Layout-Thrashing entsteht. Führe besser zuerst alle Reads durch, dann alle Writes (oder lass GSAP die Writes in einem Durchgang erledigen).
Viele Elemente (Stagger, Listen)
- Verwende stagger anstelle vieler separater Tweens mit manuellen Verzögerungen, wenn die Animation identisch ist; das ist effizienter.
- Ziehe bei langen Listen Virtualisierung in Betracht oder animiere nur sichtbare Elemente; vermeide es, hunderte gleichzeitige Tweens zu erzeugen, wenn dies Ruckler verursacht.
- Wiederverwende Timelines wo möglich; vermeide es, in jedem 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 fixierte 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 (debounce) wenn möglich.
Gleichzeitige Arbeit reduzieren
- Pausiere oder beende Animationen, die sich außerhalb des Bildschirms oder inaktiven Bereichs befinden, wenn sie nicht sichtbar sind (z. B. wenn der Nutzer weg navigiert).
- Vermeide es, gleichzeitig viele Eigenschaften auf vielen Elementen zu animieren; vereinfache oder reihenfolge sie 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 identisch ist.
- ✅ Verwende gsap.quickTo() für häufig aktualisierte Eigenschaften (z. B. Mausfolger).
- ✅ Räume auf oder beende Animationen außerhalb des Bildschirms; rufe ScrollTrigger.refresh() auf, wenn sich das Layout ändert, entprellt (debounced) 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 „nur für den Fall“; verwende sie nur für Elemente, die tatsächlich animieren.
- ❌ Erstelle hunderte überlappender Tweens oder ScrollTrigger, ohne sie auf leistungsschwachen Geräten zu testen.
- ❌ Ignoriere die Bereinigung; verwaiste Tweens und ScrollTrigger laufen weiter und können Performance und Korrektheit beeinträchtigen.