60 кадров без компромиссов

Качество анимации — один из самых чётких сигналов, который отличает премиальный продукт от посредственного, даже если пользователь не может объяснить почему. Когда страница ощущается тяжёлой, когда скролл подёргивается, когда hover-эффект мерцает — это проблема производительности, а не дизайна. И почти всегда она из одной и той же причины: JavaScript делает работу, которую не должен делать.

У браузера есть два этапа рендеринга, которые здесь важны: основной поток и compositor-поток. Основной поток обрабатывает выполнение JavaScript, расчёт лейаута и отрисовку. Compositor-поток занимается финальным соединением слоёв. Только два CSS-свойства работают целиком на compositor-потоке: transform и opacity. Всё остальное — top, left, width, height, background-color — заставляет основной поток пересчитывать лейаут или перерисовывать, что роняет кадры.

Мы работаем compositor-first. Анимации, которые двигают элементы, используют transform: translate() вместо изменения top или left. Анимации появления и исчезновения используют opacity вместо display или visibility. Браузер обрабатывает их на отдельном потоке, который работает даже когда основной поток занят обработкой клика или выполнением скрипта. Именно поэтому такие анимации держат 60 fps даже на нагруженной странице.

Для сложных многошаговых анимаций мы используем GSAP, для взаимодействий на уровне компонентов — hover-состояния, появление при скролле, 3D-наклоны карточек — Motion. Обе библиотеки соблюдают compositor-границу. Практический результат — анимации, которые ощущаются мгновенными и органичными, а не эффектными. Именно такая калибровка нужна продукту, который хочет казаться премиальным.