Compatibilitate — ce se poate pune pe acelasi site

Cele 43 de pagini, grupate dupa ce foloseste fiecare ca sa animeze. Grupurile 1–3 si 6 se combina intre ele fara probleme. Grupurile 4 si 5 sunt exclusive: fiecare pune mana pe scroll, si nu poate exista decat un singur stapan al scroll-ului pe un site.

Clasificarea e citita din codul paginilor, nu din titluri — de aceea, de exemplu, pagina numita „locomotive-scroll” apare in grupul 2: nu incarca Locomotive.

Din Bricks → Settings → Custom Code → Header Scripts:

• jQuery 3.4.1
• GSAP 3.13.0 + ScrollTrigger + SplitText + ScrollSmoother + Observer + MotionPathPlugin

Orice pagina poate folosi astea fara sa incarce nimic. Ce nu e global si si-l aduce fiecare pagina singura: Flip, CustomEase, CSSRulePlugin, SplitType, Lenis, Three.js.

Doua intrebari decid daca doua pagini stau pe acelasi site:

1. Cine detine scroll-ul? Nativ (browserul), Lenis, sau ScrollSmoother. Alegi unul singur pentru tot site-ul.
2. E sectiune sau pagina intreaga? O „pagina intreaga” opreste header-ul si footer-ul si pune height/overflow pe html si body. Doua astfel de pagini nu incap una peste alta, dar pot fi doua URL-uri diferite pe acelasi site.

Cele mai portabile. Nu incarca nimic, nu se bat cu nimeni, merg pe orice site indiferent de ce ai ales la scroll. Daca vrei sa combini multe efecte pe un singur site, incepe de aici.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
Hero SVG	rAF + IntersectionObserver + 4 @keyframes	sectiune
Scrub Hero	rAF + IntersectionObserver + <video>	sectiune
Field Flight	Canvas 2D + rAF + IntersectionObserver	sectiune
Field Flight nativ	7 @keyframes + rAF	sectiune
Paul Hamilton	WAAPI (element.animate()) + rAF	pagina intreaga
Casa Alba	WAAPI + rAF + IntersectionObserver	pagina intreaga
Kate Monroe	rAF + <video> derulat la scroll	pagina intreaga
Sommers	rAF + doua <video> suprapuse	pagina intreaga
Studio Burnett	tranzitii CSS + rAF (FLIP scris de mana)	pagina intreaga
Maya Hays	tranzitii CSS + rAF + <video>	pagina intreaga

Folosesc doar GSAP si plugin-urile incarcate site-wide. Zero fisiere in plus, scroll nativ. Se combina intre ele si cu grupul 1 fara nicio precautie.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
Horizontal containerAnimation	ScrollTrigger	sectiune
Simple 3D Hover Flip	GSAP (hover)	sectiune
Coffee sprite	ScrollTrigger	sectiune
Photo gallery	GSAP	sectiune
ScrollTrigger image zoom	ScrollTrigger	sectiune
Horizontal loop cu Observer	Observer	sectiune
Horizontal scroll	ScrollTrigger — nu incarca Locomotive (titlul a fost corectat; slug-ul a ramas)	sectiune
Vertical sliding cards	GSAP	sectiune
Start – Goodbye	ScrollTrigger + SplitText	sectiune
Running Tractor	ScrollTrigger + MotionPathPlugin	sectiune
Parallax scene	ScrollTrigger	sectiune
Image comparison	GSAP	sectiune
Mouse follower	GSAP (quickTo)	sectiune
Hero bento	ScrollTrigger	sectiune
Image decompose	ScrollTrigger (pin + scrub)	pagina intreaga
Secventa pe canvas	ScrollTrigger + Canvas 2D, 97 cadre	pagina intreaga
Codegrid Exoape menu	GSAP	pagina intreaga
Dezea carousel	GSAP	pagina intreaga
Metalab LP	GSAP	pagina intreaga
Linden	ScrollTrigger + <video> derulat la scroll	pagina intreaga

Merg la fel de bine, dar fiecare isi trage singura un fisier de pe un CDN. Inainte sa le muti pe alt site, muta si plugin-ul — de preferat in Header Scripts, o singura data, la aceeasi versiune ca GSAP-ul global.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
Fullscreen overlay nav	GSAP + CSSRulePlugin unpkg gsap@3 — versiune neblocata	pagina intreaga
Landing page reveal	GSAP + Flip + CustomEase + SplitType isi incarca si propriul gsap 3.12.5	pagina intreaga
DavidAlaba reveal	GSAP + SplitText + CustomEase jsdelivr 3.13.0	pagina intreaga
Aristide Benoist carousel	GSAP + CustomEase jsdelivr 3.12.5	pagina intreaga

Un singur Lenis pe site. Lenis nu muta continutul in alt container: intercepteaza rotita si scrie scrollTop. De aceea se impaca bine cu paginile din grupurile 1–3 — trebuie doar legat de ScrollTrigger o singura data:

lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(function (t) { lenis.raf(t * 1000); });
gsap.ticker.lagSmoothing(0);

Lenis nu vine cu CSS-ul lui cand il iei ca modul ESM, iar tema are smooth scroll pornit (html { scroll-behavior: smooth }), care inghite window.scrollTo(). Reteta completa e la Studio Monet.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
GSAP text animation	ScrollTrigger + SplitText Lenis @studio-freight/lenis@1.0.33	pagina intreaga
RedoMedia split-card	ScrollTrigger Lenis @studio-freight/lenis@1.0.33	pagina intreaga
Zetr scroll animations	ScrollTrigger Lenis lenis@1.1.13	pagina intreaga
Studio Monet	ScrollTrigger + MotionPathPlugin Lenis lenis@1.1.13 (+esm)	pagina intreaga

Un singur ScrollSmoother pe site, si nu impreuna cu Lenis. Spre deosebire de Lenis, ScrollSmoother muta tot continutul intr-un #wrapper > #content pe care il transleaza. Consecinta care surprinde: position: fixed nu mai e fata de fereastra, ci fata de containerul transformat — deci header-uri lipite, butoane fixe si overlay-uri din alte pagini se strica.

Daca site-ul are elemente fixe, alege Lenis. ScrollSmoother e de ales cand chiar vrei data-speed / effects, ca la Hero despicat.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
Image Parallax	ScrollTrigger + ScrollSmoother	sectiune
ScrollTrigger Clamp	ScrollTrigger + ScrollSmoother	sectiune
Hero despicat	ScrollTrigger + ScrollSmoother (effects)	pagina intreaga
Home logo to header	ScrollTrigger + ScrollSmoother	pagina intreaga

Scroll nativ, deci nu se bate cu nimeni la scroll. Singura precautie e costul: o scena WebGL per pagina, nu doua.

Pagina	Cu ce animeaza	Sectiune sau pagina intreaga
Clares	Three.js 0.160 (modul ESM, jsdelivr) + Canvas + rAF	pagina intreaga

	1–2 Nativ / GSAP	3 Plugin extern	4 Lenis	5 ScrollSmoother	6 Three.js
1–2 Nativ / GSAP	da	da	da	atentie	da
3 Plugin extern	da	atentie	da	da	da
4 Lenis	da	da	o instanta	nu	da
5 ScrollSmoother	atentie	da	nu	o instanta	da
6 Three.js	da	da	da	da	o scena

• 1–2 cu ScrollSmoother: atentie — orice position: fixed din grupurile 1–2 trebuie rescris, vezi mai sus.
• 3 cu 3: atentie — doua pagini pot cere acelasi plugin la versiuni diferite. Aici e deja aliniat: tot ce e extern sta pe 3.13.0, la fel ca GSAP-ul global. Pastreaza regula cand adaugi pagini noi.
• 4 cu 4: o instanta — cele patru pagini Lenis sunt acum toate pe lenis@1.1.13. Daca treci scroll-ul neted pe tot site-ul, muta scriptul in Header Scripts si porneste Lenis o singura data, nu o data pe pagina.

Reparat pe 02.09.2026. Toate paginile au fost verificate dupa schimbare: librariile se incarca, plugin-urile se inregistreaza in GSAP, zero erori in consola.

• Landing page reveal incarca al doilea GSAP. Site-ul are deja 3.13.0 global, iar pagina mai tragea gsap 3.12.5 de pe cdnjs, care il suprascria pentru toata pagina. Rezolvat: scos scriptul de GSAP, iar Flip si CustomEase urcate la 3.13.0. Acum pagina ruleaza pe singurul GSAP din site si Flip + CustomEase + SplitType sunt inregistrate in el.
• Trei versiuni de Lenis pe patru pagini. Doua pagini foloseau @studio-freight/lenis@1.0.33 (numele vechi al pachetului). Rezolvat: toate patru sunt acum pe lenis@1.1.13. Trecerea a fost sigura pentru ca toate trei paginile pornesc Lenis cu new Lenis(), fara optiuni — deci nu putea da peste vreo optiune redenumita intre 1.0 si 1.1.
• Fullscreen overlay nav cerea gsap@3 fara versiune fixa (unpkg.com/gsap@3/dist/CSSRulePlugin.min.js) — se putea schimba singur sub tine la orice release. Rezolvat: fixat la 3.13.0. Verificat si ca CSSRulePlugin.getRule() chiar intoarce regula si ca se poate anima (width 0% → 42%).
• Aristide Benoist carousel incarca CustomEase 3.12.5 peste un GSAP 3.13.0. Rezolvat: urcat la 3.13.0, ca sa fie o singura versiune de CustomEase pe tot site-ul.

Codul original al celor cinci pagini e salvat in optiunea gsap_cdn_fix_backup_2026_09, daca vrei sa te intorci.

Rezolvate si astea:

• Cele doua perechi de pagini identice. Scrub Hero si Hero bento raman publicate; Scroll Hero v2 si Servicii test B au fost trecute pe draft — nu se mai vad pe site si au iesit din opis, dar codul e intact daca iti amintesti de ce erau doua.
• Titlul paginii „locomotive-scroll”. A devenit Horizontal scroll — ScrollTrigger, ca sa nu mai promita o librarie pe care n-o incarca. Slug-ul a ramas neatins, deci niciun link nu s-a rupt.

Fiecare pagina a fost citita din _bricks_page_content_2, separat pe javascriptCode, cssCode si markup, apoi cautate apelurile reale (gsap.to, registerPlugin(), new Lenis, ScrollSmoother.create, THREE., element.animate(), requestAnimationFrame, getContext('2d')) plus <script src> din markup.

Prima trecere a dat rezultate gresite din doua motive, notate aici ca sa nu se repete: cautarea in markup gasea numele librariilor in textul descrierilor (pagina de opis „folosea” MotionPath doar pentru ca scria despre el), iar gsap\. se potrivea pe domeniul gsap.pinul.com din URL-urile imaginilor — asa au aparut ca pagini GSAP sase porturi care sunt de fapt native.