Веб-анимация: GSAP, Lenis и Three.js

01Как браузер рисует кадр

Чтобы хорошо анимировать, нужно понимать, что браузер делает 60 и более раз в секунду. Для каждого кадра он может выполнить JavaScript, пересчитать стили, сделать layout (вычислить размеры и позиции), paint (закрасить пиксели) и composite (сложить слои на GPU). Изменение width, height, top или margin вызывает layout и paint — это дорого. Изменение transform и opacity обычно позволяет пропустить оба этапа и выполняется только в композиторе — это дёшево. Поэтому плавные анимации двигают элементы через translate, scale и rotate, а растворяют через opacity. При 60Hz на кадр у вас около 16 миллисекунд, а на экранах 120Hz ещё меньше, так что каждый лишний layout вам дорого обходится.

• Дёшево: transform (translate, scale, rotate), opacity, во многих случаях filter.
• Дорого: width, height, top, left, margin, padding, размер box-shadow.
• Layout thrash: чтение layout (offsetHeight) сразу после записи стилей, в цикле.

02Основы GSAP и таймлайны

GSAP анимирует любое числовое свойство во времени. Tween — это одна анимация: gsap.to() анимирует к значениям, gsap.from() — от значений к текущему состоянию, а gsap.fromTo() задаёт оба конца. Таймлайн — это последовательность твинов с точным контролем наложений через position-параметр: '<' запускает вместе с предыдущим твином, '-=0.2' — с наложением на 0.2 секунды. Таймлайны можно ставить на паузу, разворачивать, ускорять и прокручивать (scrub), поэтому они идеальны для интро и скролл-историй. С 2025 года GSAP и все его плагины, включая SplitText и ScrollTrigger, бесплатны для коммерческого использования. В React используйте хук useGSAP из @gsap/react: он ограничивает селекторы контейнером и откатывает все анимации при размонтировании.

1"use client";
2import { useRef } from "react";
3import gsap from "gsap";
4import { useGSAP } from "@gsap/react";
5 
6gsap.registerPlugin(useGSAP);
7 
8export function Intro() {
9  const root = useRef<HTMLDivElement>(null);
10  useGSAP(() => {
11    const tl = gsap.timeline({ defaults: { ease: "power3.out", duration: 0.8 } });
12    tl.from(".title", { y: 40, autoAlpha: 0 })
13      .from(".lead", { y: 20, autoAlpha: 0 }, "-=0.5")
14      .from(".cta", { scale: 0.9, autoAlpha: 0 }, "<0.2");
15  }, { scope: root });
16  return <div ref={root}>{/* .title .lead .cta */}</div>;
17}

03ScrollTrigger и SplitText

ScrollTrigger связывает анимацию с позицией скролла. Вы задаёте элемент-триггер и точки start и end, например 'top 80%' (когда верх элемента доходит до 80% высоты вьюпорта). С scrub: true анимация следует за полосой прокрутки; с pin: true элемент остаётся зафиксированным, пока играет таймлайн. Во время разработки включайте markers: true. SplitText разбивает текст на строки, слова или символы, чтобы анимировать их со stagger. Переписанная в 2025 году версия меньше по размеру, заново разбивает текст при ресайзе через autoSplit, умеет оборачивать строки в маски для эффектов появления и добавляет aria-label родителю, скрывая разбитые кусочки от скринридеров. Всегда дожидайтесь загрузки шрифтов перед разбиением, иначе переносы строк будут неверными.

1gsap.registerPlugin(ScrollTrigger, SplitText);
2 
3document.fonts.ready.then(() => {
4  SplitText.create(".headline", {
5    type: "lines",
6    mask: "lines",
7    autoSplit: true,
8    onSplit: (self) =>
9      gsap.from(self.lines, {
10        yPercent: 100,
11        stagger: 0.08,
12        scrollTrigger: { trigger: ".headline", start: "top 80%" },
13      }),
14  });
15});

04Плавная прокрутка с Lenis

Lenis — небольшая библиотека, которая сглаживает прокрутку колесом и тачпадом, сохраняя нативное поведение скролла: страница по-прежнему прокручивает документ, поэтому position: sticky, якоря и инструменты доступности продолжают работать. Ключевая точка интеграции — ScrollTrigger: оба должны использовать одни и те же часы и одну и ту же позицию скролла. Вы запускаете Lenis от тикера GSAP и говорите ScrollTrigger обновляться на каждое событие скролла Lenis. Отключите lag smoothing в GSAP, чтобы они никогда не расходились. Осторожнее с вложенными областями прокрутки (модалки, выпадающие списки): помечайте их data-lenis-prevent, чтобы они скроллились нативно. Уважайте reduced motion: для таких пользователей вообще не запускайте Lenis.

1import Lenis from "lenis";
2import gsap from "gsap";
3import { ScrollTrigger } from "gsap/ScrollTrigger";
4 
5gsap.registerPlugin(ScrollTrigger);
6 
7const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
8if (!reduce) {
9  const lenis = new Lenis({ lerp: 0.1 });
10  lenis.on("scroll", ScrollTrigger.update);
11  gsap.ticker.add((time) => lenis.raf(time * 1000));
12  gsap.ticker.lagSmoothing(0);
13}

05Основы Three.js

Three.js — библиотека поверх WebGL (а теперь и WebGPU) для 3D в браузере. Каждой сцене нужны четыре вещи: Scene, которая хранит объекты, Camera, которая на неё смотрит, Renderer, который рисует в canvas, и Mesh — это геометрия (форма) плюс материал (как она выглядит). Для большинства материалов нужен свет. Цикл анимации обновляет объекты и рендерит каждый кадр. Для производительности ограничьте pixel ratio значением 2, переиспользуйте геометрии и материалы, ставьте рендеринг на паузу, когда canvas вне экрана, и вызывайте dispose() для геометрий, материалов и текстур при размонтировании компонента, иначе утекает память GPU. В React-проектах React Three Fiber оборачивает те же идеи в компоненты.

1import * as THREE from "three";
2 
3const canvas = document.querySelector("canvas")!;
4const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
5renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
6renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
7 
8const scene = new THREE.Scene();
9const camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientHeight, 0.1, 100);
10camera.position.z = 4;
11 
12const mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 1), new THREE.MeshNormalMaterial());
13scene.add(mesh);
14 
15renderer.setAnimationLoop((t) => {
16  mesh.rotation.y = t * 0.0004;
17  renderer.render(scene, camera);
18});

06Производительность: transform, will-change и layout thrash

Большинство дёрганых анимаций имеют три причины. Первая — анимация свойств раскладки; переходите на transform (x, y, scale и rotation в GSAP уже используют transform). Вторая — layout thrash: код, который записывает стиль, затем читает offsetHeight или getBoundingClientRect, затем снова записывает, заставляя браузер многократно пересчитывать layout в пределах одного кадра. Сначала соберите все чтения, потом все записи. Третья — слишком много слоёв или огромная перерисовываемая область. will-change: transform выносит элемент на собственный GPU-слой, что помогает элементу, который вот-вот начнёт анимироваться, но каждый слой стоит памяти, поэтому добавляйте его незадолго до анимации и убирайте после, и никогда — на сотни элементов. Профилируйте в панели Performance в Chrome DevTools: длинные фиолетовые (layout) и зелёные (paint) блоки показывают проблему.

• В GSAP анимируйте x, y, scale, rotation и autoAlpha.
• Сначала прочитайте все замеры, потом записывайте стили.
• Используйте will-change экономно и временно.
• Убивайте ScrollTrigger'ы и твины при смене маршрута, чтобы избежать утечек.

07Reduced motion и доступность

У некоторых людей от сильного движения, параллакса и зума кружится голова или начинается тошнота. Они включают «уменьшение движения» в операционной системе, а браузер отдаёт это как media query prefers-reduced-motion. Уважайте её: оставляйте растворения и смену цвета, но убирайте крупные перемещения, параллакс, автоматически играющие циклы и перехват прокрутки. gsap.matchMedia() позволяет задавать анимации под каждое условие и автоматически откатывает их, когда условие меняется. Не менее важно: страница должна быть полноценной без JavaScript. Контент, скрытый в CSS в ожидании анимации появления, должен иметь видимое конечное состояние, если скрипт не загрузился. Никогда не уводите фокус анимацией, давайте ставить на паузу всё, что движется дольше пяти секунд (требование WCAG), и избегайте мигания чаще трёх раз в секунду.

1const mm = gsap.matchMedia();
2 
3mm.add("(prefers-reduced-motion: no-preference)", () => {
4  gsap.from(".card", { y: 60, autoAlpha: 0, stagger: 0.1,
5    scrollTrigger: { trigger: ".cards", start: "top 75%" } });
6});
7 
8mm.add("(prefers-reduced-motion: reduce)", () => {
9  gsap.from(".card", { autoAlpha: 0, duration: 0.3 });
10});

08Слои композитора: что на самом деле делает GPU

Когда вы анимируете transform или opacity, браузер может двигать элемент в потоке композитора, отдельно от главного потока, где выполняется JavaScript. Для этого элементу нужен собственный слой — битмап в памяти GPU. Браузеры повышают элементы до слоя автоматически во время CSS-переходов и transform-анимаций Web Animations API или когда вы задаёте will-change: transform. Каждый слой стоит примерно ширина на высоту на четыре байта, умноженные на квадрат device pixel ratio, поэтому один полноэкранный слой на телефоне с 3x уже занимает больше десяти мегабайт. Повысьте до слоя пару сотен карточек — и мобильные браузеры начинают терять кадры или даже перезагружают вкладку. Обратите внимание на важную разницу: CSS-анимации и анимации transform через Web Animations API могут продолжаться, даже когда главный поток занят, а анимации на JavaScript, включая GSAP, считают каждый кадр в главном потоке, поэтому длинные задачи заставляют их дёргаться. Что повышено до слоя, смотрите в панели Layers в DevTools и через границы слоёв на вкладке Rendering.

• Память слоя растёт с площадью и квадратом pixel ratio, а не только с количеством элементов.
• Перекрытие повышенного слоя может принудительно вынести в слои и другие элементы (layer explosion).
• Для эффектов, которые должны пережить загруженный главный поток, выбирайте CSS или Web Animations API.

09Высокочастотное движение: quickTo, overwrite и ticker

Некоторое движение обновляется десятки раз в секунду: курсор-последователь, магнитная кнопка, параллакс, реагирующий на указатель. Создание нового gsap.to() на каждый pointermove выделяет объекты и порождает твины, которые воюют друг с другом. gsap.quickTo() строит одну переиспользуемую функцию на свойство, которая просто перенацеливает один твин, и это намного дешевле. Когда одно и то же свойство могут анимировать несколько твинов, задайте overwrite: 'auto', чтобы GSAP убивал только пересекающуюся часть старых твинов. Вся анимация GSAP работает на одном ticker, построенном на requestAnimationFrame; подключайте свою покадровую логику через gsap.ticker.add(), а не запускайте второй цикл, чтобы всё оставалось синхронным и вставало на паузу вместе. GSAP также применяет lag smoothing после длинного кадра, чтобы движение не прыгало. Внутри таких обработчиков никогда не читайте layout; кэшируйте размеры элементов при resize через ResizeObserver и только записывайте transform.

1import gsap from "gsap";
2 
3const xTo = gsap.quickTo(".cursor", "x", { duration: 0.4, ease: "power3" });
4const yTo = gsap.quickTo(".cursor", "y", { duration: 0.4, ease: "power3" });
5 
6window.addEventListener(
7  "pointermove",
8  (e) => {
9    xTo(e.clientX);
10    yTo(e.clientY);
11  },
12  { passive: true },
13);
14 
15// one shared per-frame hook instead of a separate requestAnimationFrame loop
16gsap.ticker.add((time, deltaTime) => {
17  /* update custom state with deltaTime (ms) */
18});

10Пограничные случаи ScrollTrigger, которые ломаются в продакшене

ScrollTrigger вычисляет позиции start и end и кэширует их, поэтому всё, что позже меняет высоту страницы, заставляет триггеры срабатывать не там: изображения без размеров, подмена веб-шрифтов, контент, загруженный на клиенте, раскрывающиеся аккордеоны. Резервируйте место под медиа и вызывайте ScrollTrigger.refresh() после таких изменений; при load и resize он уже запускается сам. Создавайте триггеры в том порядке, в котором они идут на странице, или задавайте refreshPriority, потому что пиннинг секции добавляет отступ, который сдвигает всё ниже. На телефонах появление и скрытие адресной строки меняет размер viewport; ScrollTrigger.config({ ignoreMobileResize: true }) пропускает refresh при таких вертикальных resize, а высоты в единицах svh остаются стабильными. Пиннинг внутри родителя с transform работает неправильно, потому что position: fixed становится относительным любому предку с transform; пиньте внешнюю секцию. В одностраничной навигации убивайте старые триггеры до создания новых, иначе позиции с предыдущей страницы протекают на следующую.

1gsap.registerPlugin(ScrollTrigger);
2 
3ScrollTrigger.config({ ignoreMobileResize: true });
4 
5// recalc once fonts and late content are in place
6document.fonts.ready.then(() => ScrollTrigger.refresh());
7 
8new ResizeObserver(() => ScrollTrigger.refresh()).observe(
9  document.querySelector("main")!,
10);

11Three.js на масштабе: draw calls, шейдеры и WebGPU

3D-сцену обычно ограничивают draw calls и работа шейдеров, а не количество треугольников. Каждый меш со своим материалом — минимум один draw call, поэтому тысяча одинаковых объектов отдельными мешами стоит тысячу вызовов; один InstancedMesh рисует их все за один вызов с матрицей на каждый экземпляр. Объединяйте статическую геометрию и разделяйте материалы, чтобы GPU реже переключал состояние. Первый кадр, использующий новый материал, компилирует его шейдер в главном потоке, и это может заморозить страницу на сотни миллисекунд; прекомпилируйте через renderer.compileAsync() до показа сцены. Для сцен, которые меняются только при взаимодействии, рендерите по требованию, а не каждый кадр (в React Three Fiber — frameloop='demand'). Следите за renderer.info: живые draw calls, треугольники, геометрии и текстуры; если числа растут от навигации к навигации, это утечка. Three.js также поставляет WebGPURenderer, который откатывается на WebGL 2 и даёт compute-шейдеры, но обычный WebGL остаётся самым безопасным выбором, когда важна широкая поддержка устройств.

1import * as THREE from "three";
2 
3const count = 2000;
4const mesh = new THREE.InstancedMesh(
5  new THREE.SphereGeometry(0.05, 12, 12),
6  new THREE.MeshStandardMaterial({ color: 0xdddddd }),
7  count,
8);
9const m = new THREE.Matrix4();
10for (let i = 0; i < count; i++) {
11  m.setPosition(Math.random() * 10 - 5, Math.random() * 10 - 5, Math.random() * -10);
12  mesh.setMatrixAt(i, m);
13}
14scene.add(mesh); // 2,000 spheres, one draw call
15 
16await renderer.compileAsync(scene, camera); // avoid first-frame shader jank
17console.log(renderer.info.render.calls);