Performance GSAP
Quand utiliser cette compétence
Appliquez-la lors de l'optimisation des animations GSAP pour un rendu fluide à 60fps, la réduction des coûts de mise en page/peinture, ou lorsque l'utilisateur demande des performances, des saccades ou les meilleures pratiques pour des animations rapides.
Compétences associées : Construisez 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 opérations de peinture. É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 dans la mesure du possible : width, height, top, left, margin, padding (ils déclenchent la mise en page et peuvent provoquer des saccades).
Les x et y de GSAP utilisent les transformations (translate) par défaut ; utilisez-les à la place de left/top pour les mouvements.
will-change
Utilisez will-change en CSS sur les éléments qui vont animer. Il indique au navigateur de promouvoir la couche.
will-change: transform;
Lectures et écritures par lots
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 thrashs de mise en page répétés. Préférez effectuer d'abord toutes les lectures, puis toutes les écritures (ou laissez GSAP gérer les écritures en une seule fois).
Nombreux éléments (Stagger, listes)
- Utilisez stagger plutôt que plusieurs tweens séparées avec des délais manuels lorsque l'animation est la même ; c'est plus efficace.
- Pour les longues listes, envisagez la virtualisation ou l'animation des seuls éléments visibles ; évitez de créer des centaines de tweens simultanées 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. followers de souris)
Privilégiez gsap.quickTo() pour les propriétés souvent mises à jour (ex. x/y d'un follower de souris). Il réutilise une seule tween au lieu d'en créer de nouvelles à 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 performances
- pin: true promeut l'élément épinglé ; n'épinglez que 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 ; utilisez un debounce 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
- ✅ Animez transform et opacity ; utilisez will-change en CSS uniquement sur les éléments en animation.
- ✅ Utilisez stagger plutôt que plusieurs tweens séparées avec des délais manuels lorsque l'animation est la même.
- ✅ Utilisez gsap.quickTo() pour les propriétés fréquemment mises à jour (ex. followers de souris).
- ✅ Nettoyez ou tuez les animations hors écran ; appelez ScrollTrigger.refresh() lorsque la mise en page change, avec un debounce si possible.
À ne pas faire
- ❌ Animez width, height, top, left pour le mouvement lorsque x, y, scale peuvent obtenir le même rendu.
- ❌ Définissez will-change ou force3D sur chaque élément « au cas où » ; utilisez-les pour les éléments qui sont réellement en animation.
- ❌ Créez des centaines de tweens ou ScrollTriggers qui se chevauchent sans tester sur des appareils bas de gamme.
- ❌ Négligez le nettoyage ; les tweens et ScrollTriggers orphelins continuent de s'exécuter et peuvent nuire aux performances et à la correction.