Վեբ անիմացիա. GSAP, Lenis և Three.js

01Ինչպես է բրաուզերը նկարում frame-ը

Լավ անիմացիա անելու համար պետք է իմանալ, թե ինչ է անում բրաուզերը վայրկյանում 60 կամ ավելի անգամ։ Յուրաքանչյուր frame-ի համար այն կարող է գործարկել JavaScript, վերահաշվել style-երը, անել layout (հաշվել չափերն ու դիրքերը), paint (լցնել պիքսելները) և composite (շերտերը դասավորել GPU-ի վրա)։ width-ի, height-ի, top-ի կամ margin-ի փոփոխությունը ստիպում է layout և paint անել, ինչը թանկ է։ transform-ի և opacity-ի փոփոխությունը սովորաբար կարող է շրջանցել երկուսն էլ և տեղի ունենալ միայն compositor-ում, ինչը էժան է։ Ահա թե ինչու սահուն անիմացիաները տարրերը տեղաշարժում են translate-ով, scale-ով և rotate-ով, իսկ fade-ն անում են opacity-ով։ 60Hz-ի դեպքում մեկ frame-ի համար ունեք մոտ 16 միլիվայրկյան, իսկ 120Hz էկրաններում՝ ավելի քիչ, ուստի յուրաքանչյուր ավելորդ layout ձեզ թանկ է նստում։

• Էժան՝ transform (translate, scale, rotate), opacity, շատ դեպքերում՝ filter։
• Թանկ՝ width, height, top, left, margin, padding, box-shadow-ի չափը։
• Layout thrash. ցիկլում style-եր գրելուց անմիջապես հետո layout կարդալ (offsetHeight)։

02GSAP-ի հիմունքներ և timeline-ներ

GSAP-ը ժամանակի ընթացքում անիմացիա է անում ցանկացած թվային հատկություն։ Tween-ը մեկ անիմացիա է. gsap.to()-ն անիմացիա է անում դեպի արժեքները, gsap.from()-ը՝ արժեքներից դեպի ընթացիկ վիճակը, իսկ gsap.fromTo()-ն սահմանում է երկու ծայրերն էլ։ Timeline-ը tween-ների հաջորդականություն է՝ համընկնումների ճշգրիտ կառավարմամբ position պարամետրի միջոցով. '<'-ը սկսում է նախորդ tween-ի հետ միաժամանակ, '-=0.2'-ը համընկնում է 0.2 վայրկյանով։ Timeline-ները կարելի է դադարեցնել, հետ պտտել, արագացնել և scrub անել, ինչը դրանք իդեալական է դարձնում intro-ների և scroll պատմությունների համար։ 2025-ից GSAP-ը և նրա բոլոր plugin-ները, ներառյալ SplitText-ը և ScrollTrigger-ը, անվճար են կոմերցիոն օգտագործման համար։ React-ում օգտագործեք useGSAP hook-ը @gsap/react-ից. այն selector-ները սահմանափակում է container-ով և unmount-ի ժամանակ հետ է շրջում բոլոր անիմացիաները։

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-ը անիմացիան կապում է scroll-ի դիրքի հետ։ Սահմանում եք trigger տարր և սկզբի ու վերջի կետեր, օրինակ՝ 'top 80%' (երբ տարրի վերին եզրը հասնում է viewport-ի 80%-ին)։ scrub: true-ի դեպքում անիմացիան հետևում է scrollbar-ին, pin: true-ի դեպքում տարրը ֆիքսված է մնում, մինչ timeline-ը խաղում է։ Մշակման ընթացքում օգտագործեք markers: true։ SplitText-ը տեքստը բաժանում է տողերի, բառերի կամ տառերի, որպեսզի կարողանաք դրանք stagger անել։ 2025-ի վերաշարադրված տարբերակն ավելի փոքր է, autoSplit-ով նորից է բաժանում resize-ի ժամանակ, կարող է տողերը փաթաթել mask-երի մեջ reveal էֆեկտների համար և ծնող տարրին ավելացնում է aria-label՝ բաժանված կտորները թաքցնելով screen reader-ներից։ Բաժանելուց առաջ միշտ սպասեք font-երի բեռնմանը, այլապես տողադարձերը սխալ կլինեն։

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Սահուն scroll Lenis-ով

Lenis-ը փոքր գրադարան է, որը սահունացնում է մկնիկի անիվի և trackpad-ի scroll-ը՝ պահպանելով բնիկ scroll-ի վարքը. էջը դեռ scroll է անում document-ը, ուստի position: sticky-ն, anchor-ները և հասանելիության գործիքները շարունակում են աշխատել։ Ինտեգրման հիմնական կետը ScrollTrigger-ն է. երկուսն էլ պետք է օգտագործեն նույն ժամացույցը և scroll-ի նույն դիրքը։ Lenis-ը շարժում եք GSAP-ի ticker-ից և ScrollTrigger-ին ասում եք թարմանալ Lenis-ի յուրաքանչյուր scroll իրադարձության ժամանակ։ Անջատեք GSAP-ի lag smoothing-ը, որպեսզի դրանք երբեք չշեղվեն իրարից։ Զգույշ եղեք ներդրված scroll տարածքների հետ (modal-ներ, dropdown-ներ). նշեք դրանք data-lenis-prevent-ով, որպեսզի բնիկ scroll անեն։ 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}

05Three.js-ի հիմունքներ

Three.js-ը WebGL-ի (և այժմ նաև WebGPU-ի) վրա կառուցված գրադարան է բրաուզերում 3D-ի համար։ Յուրաքանչյուր տեսարանի պետք է չորս բան. Scene, որը պահում է օբյեկտները, Camera, որը նայում է դրան, Renderer, որը նկարում է canvas-ի վրա, և Mesh-եր, որոնք geometry (ձևը) գումարած material (ինչպես է այն երևում) են։ Material-ների մեծ մասի համար լույսեր են պետք։ Անիմացիայի ցիկլը թարմացնում է օբյեկտները և render է անում յուրաքանչյուր frame-ը։ Արտադրողականության համար pixel ratio-ն սահմանափակեք 2-ով, վերաօգտագործեք geometry-ները և material-ները, դադարեցրեք render-ը, երբ canvas-ը էկրանից դուրս է, և կոմպոնենտի unmount-ի ժամանակ կանչեք dispose() geometry-ների, material-ների և texture-ների վրա, այլապես 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

«Կմկմացող» անիմացիաների մեծ մասն ունի երեք պատճառ։ Առաջին՝ layout հատկությունների անիմացիա. անցեք transform-ների (GSAP-ի x-ը, y-ը, scale-ը և rotation-ն արդեն transform են օգտագործում)։ Երկրորդ՝ layout thrash. կոդ, որը գրում է style, հետո կարդում offsetHeight կամ getBoundingClientRect, հետո նորից գրում՝ ստիպելով բրաուզերին մեկ frame-ի ներսում բազմիցս վերահաշվել layout-ը։ Նախ խմբով կատարեք բոլոր կարդալները, հետո բոլոր գրելները։ Երրորդ՝ չափազանց շատ շերտեր կամ հսկայական paint արվող տարածք։ will-change: transform-ը տարրը բարձրացնում է իր սեփական GPU շերտի, ինչն օգնում է անիմացիայի պատրաստվող տարրի դեպքում, բայց յուրաքանչյուր շերտ հիշողություն է արժենում, ուստի ավելացրեք այն քիչ առաջ և հեռացրեք հետո, երբեք՝ հարյուրավոր տարրերի վրա։ Պրոֆիլավորեք Chrome DevTools-ի Performance վահանակում. երկար մանուշակագույն (layout) և կանաչ (paint) բլոկները ցույց են տալիս խնդիրը։

• GSAP-ում անիմացիա արեք x, y, scale, rotation և autoAlpha։
• Նախ կարդացեք բոլոր չափումները, հետո գրեք style-երը։
• will-change-ն օգտագործեք խնայողաբար և ժամանակավորապես։
• Route-ի փոփոխության ժամանակ kill արեք ScrollTrigger-ները և tween-ները՝ արտահոսքերից խուսափելու համար։

07Reduced motion և հասանելիություն

Որոշ մարդկանց մոտ մեծ շարժումը, parallax-ը և zoom-ը գլխապտույտ կամ սրտխառնոց են առաջացնում։ Նրանք իրենց օպերացիոն համակարգում միացնում են «reduce motion», և բրաուզերը դա տրամադրում է որպես prefers-reduced-motion media query։ Հարգեք այն. պահեք fade-երը և գույնի փոփոխությունները, բայց հանեք մեծ շարժումները, parallax-ը, ինքնաշխատ ցիկլերը և scroll-ի «առևանգումը» smooth scroll-ով։ gsap.matchMedia()-ն թույլ է տալիս անիմացիաներ սահմանել ըստ պայմանի և ավտոմատ հետ է շրջում դրանք, երբ պայմանը փոխվում է։ Նույնքան կարևոր է՝ էջը պետք է ամբողջական լինի առանց JavaScript-ի։ CSS-ում թաքցված բովանդակությունը, որը սպասում է անիմացիային՝ բացահայտվելու համար, պետք է ունենա տեսանելի վերջնական վիճակ, եթե script-ը ձախողվի։ Երբեք անիմացիայով focus-ը մի տարեք, հինգ վայրկյանից ավելի շարժվող ամեն ինչ թողեք դադարեցվող (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});

08Compositor layers՝ ինչ է իրականում անում GPU-ն

Երբ անիմացնում եք transform կամ opacity, բրաուզերը կարող է էլեմենտը տեղաշարժել compositor thread-ում՝ առանձին main thread-ից, որտեղ աշխատում է JavaScript-ը։ Դրա համար էլեմենտին պետք է սեփական layer՝ GPU հիշողության մեջ պահվող bitmap։ Բրաուզերներն ավտոմատ promote են անում էլեմենտները CSS transitions-ի և Web Animations API-ի transform-ների ժամանակ, կամ երբ դնում եք will-change: transform։ Յուրաքանչյուր layer արժե մոտավորապես լայնություն անգամ բարձրություն անգամ չորս բայթ՝ բազմապատկած device pixel ratio-ի քառակուսիով, ուստի 3x հեռախոսի վրա մեկ ամբողջ էկրանի layer-ն արդեն տասը մեգաբայթից ավելի է։ Promote արեք մի քանի հարյուր քարտ, և մոբայլ բրաուզերները կսկսեն frame-ներ բաց թողնել կամ նույնիսկ վերաբեռնել tab-ը։ Ուշադրություն դարձրեք կարևոր տարբերությանը. transform-ի CSS և Web Animations API անիմացիաները կարող են շարունակել աշխատել նույնիսկ երբ main thread-ը բլոկավորված է, բայց JavaScript-ով կառավարվող անիմացիաները, այդ թվում GSAP-ը, ամեն frame-ը հաշվում են main thread-ում, ուստի long task-երը դրանք կակազեցնում են։ Ստուգեք, թե ինչն է promote արված, DevTools-ի Layers վահանակով և Rendering tab-ի layer borders-ով։

• Layer-ի հիշողությունն աճում է մակերեսի և pixel ratio-ի քառակուսու հետ, ոչ միայն էլեմենտների քանակի։
• Promote արված layer-ի հետ վերադրվելը կարող է ստիպել մյուս էլեմենտներին նույնպես layer դառնալ (layer explosion)։
• Այն էֆեկտների համար, որոնք պետք է դիմանան զբաղված main thread-ին, նախընտրեք CSS կամ Web Animations API։

09Բարձր հաճախականության շարժում՝ quickTo, overwrite և ticker

Որոշ շարժումներ թարմացվում են վայրկյանում տասնյակ անգամներ. cursor follower, magnetic button, pointer-ին արձագանքող parallax։ Յուրաքանչյուր pointermove-ի ժամանակ նոր gsap.to() ստեղծելը օբյեկտներ է հատկացնում և ստեղծում իրար հետ կռվող tween-ներ։ gsap.quickTo()-ն յուրաքանչյուր property-ի համար կառուցում է մեկ վերաօգտագործելի ֆունկցիա, որը պարզապես վերաթիրախավորում է մեկ tween, ինչը շատ ավելի էժան է։ Երբ մի քանի tween կարող են անիմացնել նույն property-ն, դրեք overwrite: 'auto', որպեսզի GSAP-ը սպանի հին tween-ների միայն վերադրվող մասը։ GSAP-ի ամբողջ անիմացիան աշխատում է requestAnimationFrame-ի վրա կառուցված մեկ ticker-ով. ձեր սեփական per-frame տրամաբանությունը միացրեք gsap.ticker.add()-ին՝ երկրորդ loop սկսելու փոխարեն, որպեսզի ամեն ինչ համաժամանակյա մնա և միասին դադարի։ GSAP-ը նաև կիրառում է lag smoothing երկար frame-ից հետո, որպեսզի շարժումը չթռչի։ Այս handler-ների ներսում երբեք layout մի կարդացեք. էլեմենտների չափերը cache արեք 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});

10ScrollTrigger-ի edge case-եր, որոնք կոտրվում են production-ում

ScrollTrigger-ը հաշվում է start և end դիրքերը և cache է անում դրանք, ուստի այն ամենը, ինչ հետագայում փոխում է էջի բարձրությունը, ստիպում է trigger-ներին աշխատել սխալ տեղում. առանց չափերի նկարներ, web font-երի փոխարինում, client-ում fetch արված կոնտենտ, բացվող accordion-ներ։ Տեղ պահեք media-ի համար և նման փոփոխություններից հետո կանչեք ScrollTrigger.refresh(). այն արդեն աշխատում է load-ի և resize-ի ժամանակ։ Ստեղծեք trigger-ները այն հերթականությամբ, որով դրանք հայտնվում են էջում, կամ դրեք refreshPriority, որովհետև բաժնի pin-ը ավելացնում է spacing, որը տեղաշարժում է ներքևի ամեն ինչ։ Հեռախոսներում address bar-ի երևալն ու թաքնվելը փոխում է viewport-ի չափը. ScrollTrigger.config({ ignoreMobileResize: true })-ը բաց է թողնում refresh-ները այդ ուղղահայաց resize-ների համար, իսկ svh միավորներով բարձրությունները կայուն են մնում։ Transform ունեցող parent-ի ներսում pin-ը սխալ է աշխատում, որովհետև position: fixed-ը դառնում է հարաբերական transform ունեցող ցանկացած ancestor-ի նկատմամբ. փոխարենը pin արեք արտաքին բաժինը։ Single-page նավիգացիայում սպանեք հին trigger-ները նախքան նորերը ստեղծելը, այլապես նախորդ էջի դիրքերը կթափանցեն հաջորդ էջ։

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, shaders և WebGPU

3D տեսարանը սովորաբար սահմանափակված է draw call-երով և shader-ների աշխատանքով, ոչ թե եռանկյունների քանակով։ Սեփական material ունեցող յուրաքանչյուր mesh առնվազն մեկ draw call է, ուստի հազար միանման օբյեկտ որպես առանձին mesh-եր արժեն հազար call. մեկ InstancedMesh-ը դրանք բոլորը նկարում է մեկ call-ով՝ յուրաքանչյուր instance-ի համար մեկ matrix-ով։ Միավորեք ստատիկ geometry-ն և կիսեք material-ները, որպեսզի GPU-ն ավելի հազվադեպ փոխի վիճակը։ Առաջին frame-ը, որն օգտագործում է նոր material, compile է անում դրա shader-ը main thread-ում, ինչը կարող է էջը սառեցնել հարյուրավոր միլիվայրկյաններով. նախքան տեսարանը ցույց տալը precompile արեք renderer.compileAsync()-ով։ Այն տեսարանների համար, որոնք փոխվում են միայն ինտերակցիայի ժամանակ, ռենդերեք ըստ պահանջի՝ ամեն frame-ի փոխարեն (React Three Fiber-ում՝ frameloop='demand')։ Հետևեք renderer.info-ին՝ live draw call-երի, եռանկյունների, geometry-ների և texture-ների համար. նավիգացիաների ընթացքում աճող թվերը նշանակում են leak։ Three.js-ը նաև ունի WebGPURenderer, որը fallback է անում WebGL 2-ին և հնարավորություն տալիս compute shader-ներ, բայց պարզ 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);