Performance GSAP
Quand utiliser ce skill
À appliquer lors de l'optimisation des animations GSAP pour un 60fps fluide, pour réduire les coûts de mise en page/peinture, ou lorsque l'utilisateur pose des questions sur les performances, les saccades ou les bonnes pratiques pour des animations rapides.
Skills associés : Construire des animations avec gsap-core (transforms, autoAlpha) et gsap-timeline ; pour les performances de ScrollTrigger, voir gsap-scrolltrigger.
Privilégier Transform et Opacity
Animer transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) et opacity maintient le travail sur le compositeur et évite la mise en page ainsi que la plupart des peintures. Évitez d'animer des propriétés lourdes en mise en page lorsqu'une transformation peut obtenir le même effet.
- ✅ Privilégier : x, y, scale, rotation, opacity.
- ❌ Éviter quand possible : width, height, top, left, margin, padding (ils déclenchent la mise en page et peuvent provoquer des saccades).
Les propriétés x et y de GSAP utilisent les transformations (translate) par défaut ; utilisez-les plutôt que left/top pour les déplacements.
will-change
Utilisez will-change en CSS sur les éléments qui vont être animés. Cela indique au navigateur de promouvoir la couche.
will-change: transform;
Regrouper les lectures et écritures
GSAP regroupe les mises à jour en interne. Lorsque vous mélangez GSAP avec des lectures/écritures directes du DOM ou du code dépendant de la mise en page, évitez d'entrelacer les lectures et les écritures d'une manière qui provoque des thrashings de mise en page répétés. Privilégiez la lecture de toutes les données d'abord, puis toutes les écritures (ou laissez GSAP gérer les écritures en une seule fois).
Beaucoup d'éléments (Stagger, Listes)
- Utilisez stagger plutôt que de nombreux tweens séparés avec des retards manuels lorsque l'animation est la même ; c'est plus efficace.
- Pour les longues listes, envisagez virtualisation ou l'animation des seuls éléments visibles ; évitez de créer des centaines de tweens simultanés si cela provoque des saccades.
- Réutilisez les timelines lorsque c'est possible ; évitez de créer de nouvelles timelines à chaque frame.
Propriétés fréquemment mises à jour (ex. suiveurs de souris)
Privilégiez gsap.quickTo() pour les propriétés souvent mises à jour (par ex. x/y d'un suiveur de souris). Cela réutilise un seul tween plutôt que d'en créer de nouveaux à chaque mise à jour.
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 et Performance
- pin: true promeut l'élément épinglé ; épinglez uniquement ce qui est nécessaire.
- scrub avec une petite valeur (ex.
scrub: 1) peut réduire le travail pendant le défilement ; testez sur des appareils bas de gamme. - Appelez ScrollTrigger.refresh() uniquement lorsque la mise en page change réellement (ex. après le chargement du contenu), pas à chaque redimensionnement ; débouncez si possible.
Réduire le travail simultané
- Mettez en pause ou tuez les animations hors écran ou inactives lorsqu'elles ne sont pas visibles (ex. lorsque l'utilisateur navigue ailleurs).
- Évitez d'animer un grand nombre de propriétés sur de nombreux éléments à la fois ; simplifiez ou séquencez si nécessaire.
Bonnes pratiques
- ✅ Animer transform et opacity ; utilisez will-change en CSS uniquement sur les éléments qui animent.
- ✅ Utilisez stagger plutôt que de nombreux tweens séparés avec des retards manuels lorsque l'animation est la même.
- ✅ Utilisez gsap.quickTo() pour les propriétés fréquemment mises à jour (ex. suiveurs de souris).
- ✅ Nettoyez ou tuez les animations hors écran ; appelez ScrollTrigger.refresh() lorsque la mise en page change, en débounçant si possible.
À ne pas faire
- ❌ Animer width/height/top/left pour les déplacements lorsque x/y/scale peuvent obtenir le même rendu.
- ❌ Définir will-change ou force3D sur chaque élément « au cas où » ; utilisez-les pour les éléments qui animent réellement.
- ❌ Créer des centaines de tweens ou ScrollTriggers qui se chevauchent sans les tester sur des appareils bas de gamme.
- ❌ Ignorer le nettoyage ; les tweens et ScrollTriggers errants continuent de s'exécuter et peuvent nuire aux performances et à la justesse.