Как оптимизировать GSAP-анимации для лучшей производительности

Используйте will-change и transform для плавности

При анимации элементов лучше всего использовать transform и opacity, так как они не вызывают перерасчет макета (repaint и reflow).

Пример:

Используйте GSAP.to() вместо GSAP.set() для плавных изменений

Метод .set() мгновенно изменяет свойства элемента, что может вызвать резкие скачки в анимации. Лучше использовать .to() для плавных переходов

gsap.to(".element", { x: 100, duration: 1, ease: "power2.out" });

Старайтесь не анимировать top, left, width, height

Свойства top, left, width и height требуют пересчёта макета (reflow), что замедляет рендеринг страницы. Вместо этого используйте transform: translate().

gsap.to(".element", { x: 100, duration: 1 }); // Используйте transform, а не left/top

Ограничьте количество одновременно запущенных анимаций

Чем больше анимированных элементов на странице, тем выше нагрузка на процессор. Если у вас сложная анимация, попробуйте уменьшить количество одновременно движущихся элементов.

Используйте GSAP.ticker для кастомного управления кадрами

Если у вас сложные анимации, можно вручную управлять частотой обновления кадров:

gsap.ticker.fps(60); // Устанавливает частоту кадров на 60fps

Используйте lazy: true для оптимизации отложенных анимаций

GSAP может откладывать расчеты, если анимация не выполняется в текущий момент.

gsap.to(".element", { x: 100, duration: 1, lazy: true });

Применяйте ScrollTrigger правильно

Если используете ScrollTrigger, ограничьте количество отслеживаемых элементов и настройте markers: false в продакшене.

Используйте autoAlpha вместо opacity

Свойство autoAlpha объединяет opacity и visibility, что улучшает производительность, скрывая элементы после завершения анимации.

gsap.to(".element", { autoAlpha: 0, duration: 1 });

Отключите анимации для маломощных устройств

Можно использовать matchMedia для отключения анимаций на слабых устройствах:

Используйте DevTools GSAP и Chrome Performance

GSAP имеет собственные DevTools, а также можно использовать вкладку Performance в Chrome DevTools для анализа анимаций.