GSAPLenis / Performance

GSAP, Lenis и плавный сайт: как не убить performance

Сайт с анимациями может быть быстрым, если motion не вешается на всё подряд. Нужны бюджеты, lazy media, аккуратные триггеры и отдельное внимание Safari/mobile.

Обсудить проект Все разборы

Разбор

Главные выводы

Не каждая секция должна быть сценой

Если анимация есть в каждом блоке, она перестаёт быть premium-деталью и становится нагрузкой. Motion должен поддерживать ключевые переходы и акценты.

Scroll-анимации требуют бюджета

Pin, horizontal scroll, canvas, blur, filter и большие transform-сцены нужно дозировать. Особенно в Safari и на мобильных устройствах.

Lenis не решает плохую архитектуру

Плавный скролл улучшает ощущение, но не спасает, если на странице слишком много тяжёлых repaint/reflow, fixed-слоёв, больших изображений и активных listeners.

Lazy media обязательна

Изображения, видео и canvas-эффекты должны грузиться по сценарию. Первый экран получает приоритет, остальное — lazy/preload только там, где это реально нужно.

Mobile — отдельный сценарий

На мобильных часть эффектов лучше упрощать, отключать или заменять более лёгкими reveal-анимациями. Это не упрощение дизайна, а сохранение качества.

Ошибки

Ошибки в связке GSAP, Lenis и scroll-сцен

Дублировать управление scroll

Если несколько систем одновременно управляют скроллом и resize, поведение становится нестабильным.

Не чистить ScrollTrigger

Сцены, которые остаются активными после изменения состояния страницы, могут создавать лаги и визуальные конфликты.

Игнорировать Safari и mobile

То, что плавно работает в Chrome на desktop, может давать артефакты, скачки и перегрев на iOS.

Анимировать layout-свойства

Top, left, width, height и тяжёлые filter часто дороже, чем transform/opacity и продуманная композиция.

Практика

Как внедрять GSAP/Lenis по-senior

Разделяйте сцены по стоимости

Hero, canvas, hover, scroll и footer должны иметь разные бюджеты по CPU/GPU, особенно на mobile.

Инициализируйте по необходимости

Не все сцены должны стартовать сразу. Часть логики можно запускать по viewport, idle или после первого взаимодействия.

Закладывайте fallback

Reduced motion, слабые устройства и no-JS состояние должны оставаться читаемыми, а не превращаться в пустую страницу.

Применение

Как встроить GSAP и Lenis без хаоса

Один источник scroll-логики

Lenis отвечает за плавность, ScrollTrigger — за сцены. Если несколько скриптов одновременно управляют скроллом, появляются рывки, рассинхрон и баги.

Смотреть animation-site ↗

Lifecycle для сцен

ScrollTrigger, canvas, видео и hover-эффекты нужно запускать только там, где они нужны, и чистить при смене состояния или уничтожении секции.

Смотреть frontend ↗

Motion по приоритетам

Сначала hero и ключевые переходы, затем secondary-эффекты. Не стоит давать одинаковый animation-budget каждой карточке и декоративному слою.

Разобрать motion ↗

Проверка на слабом сценарии

Если сайт красив только на мощном desktop, это не production. Нужно проверять mobile, Safari, низкую скорость сети и первый запуск.

Заказать аудит ↗

Checklist

Что применить после прочтения

Сократите тяжелые сцены

Не весь motion должен быть активным одновременно.

Разделите desktop/mobile

Mobile может иметь другой, более лёгкий сценарий движения.

Следите за media

Lazy loading и размеры изображений часто важнее, чем микротюнинг JS.

Проверяйте реальный скролл

Lenis/GSAP должны ощущаться плавно на устройствах, а не только в идеальном браузере.

CTA

Нужен сайт, который выглядит дороже ещё до первого клика?

Заполните короткий бриф — я посмотрю задачу и предложу формат без лишнего давления.

Заполнить бриф