// Tehnologija

GSAP ScrollTrigger animacije za scroll-driven sajtove

ScrollTrigger povezuje skrol sa GSAP timeline-om: svaki passage ima ulaz, srednju radnju i izlaz, sve sinhronizovano sa korisnikovim skrolom.

Pošalji upit Sve 3D usluge

ScrollTrigger je GSAP plug-in koji rešava jedan klasičan problem: kako napraviti da animacija prati skrol prirodno, bez zaglavljivanja ili "rubber band" efekata. Princip je elegantan — definišete trigger element, scrub vrednost (koliko strogo prati skrol), start i end pozicije, i ScrollTrigger se brine za ostalo. Na 3D sajtovima ga koristim za hero parallax (kamera se približava modelu kako se skroluje), chapter transitions (scena se "prevodi" iz jedne kompozicije u drugu), i pinned reveals (scena se zaledi dok prošao određen procenat skrola). Mobile podrška je solidna od kada GSAP 3.13.

Šta dobijate na predaji

Posle isporuke: izvorni repository na GitHub-u (privatan), komentarisan kod, 5-min Loom snimak koji objasni logiku scene, asset pipeline dokumentovan. Prva godina hostinga i sitnih izmena uračunata u cenu. Posle toga dogovaramo plan održavanja ako bude potrebno.

Šta dobijate

Konkretan deliverable: scroll trigger animacije integrisan u realan produkcijski sajt, ne demo. Integracija ima device-tier detekciju, slabi telefoni dobiju lakšu verziju automatski. Izvorni fajlovi se predaju u originalnim formatima — Blender, GLSL, glTF — pa svaki budući developer može da nastavi tamo gde sam stao.

Kako to radi u praksi

Na tipičnom projektu, scroll trigger animacije stiže kao samostalni modul: jedan entry-point JS fajl, jedan CSS, asset bundle ispod 1.5MB ukupno. Integracija je sandbox — ostatak sajta ostaje SEO-friendly klasičan HTML. Frame budget: 60 FPS na srednjem Androidu, sa merljivim fallback režimom ispod toga.

Performance budget

Lighthouse mobile cilj: 85+ u svim kategorijama. Merim na realnim uređajima, ne samo emulatoru. Asset kompresija: glTF + Draco za mesh-eve, KTX2 za teksture, Brotli za shaderse. Lazy-load svake scroll trigger animacije scene koja nije above-the-fold da prvi paint ostane ispod 1.5s.

Često postavljana pitanja

Zašto baš ova tehnologija?

Ima najveći produkcijski ekosistem, najviše dokumentacije, i najviše iskusnih developera. Za sajt koji treba da traje 3+ godine, zrelost ekosistema je važnija od pojedinačnih feature-a.

Šta ako sledeće godine izađe nešto novo?

Pratim novi tooling i migriram kada ima smisla, ali tek pošto novi alat ima 6-9 meseci stable produkcijskih izdanja. Ne pišem klijentske sajtove na bleeding-edge alatima — to je put ka pokvarenim sajtovima.

Koliko traje izrada?

Standardni rok: 4-6 nedelja od potpisa ugovora do live sajta. Veći opseg (konfigurator, multi-scene scrollytelling) ide na 8-12 nedelja. Hitne projekte (2-3 nedelje) primam uz povećanje cene od 30-40%.

Koliko košta?

Hero 3D nadogradnja: 800-1.200 EUR. Kompletan multi-scene 3D sajt: 2.500-4.000 EUR. Konfigurator sa custom shaderima: 4.000-10.000 EUR. Sve fiksne cene, izvorni kod uključen. Plaćanje preko firme sa PDV-om.

Šta sa korisnicima na slabim telefonima?

Sajt detektuje device tier pre prve scene i servira lakšu verziju na slabom hardveru (manje čestica, jednostavniji shaderi). Uređaji bez WebGL-a dobiju statičan fallback koji čuva vizuelni jezik i konverzioni put.

Spremni za 3D iskustvo na vašem sajtu?

Recite mi šta vam treba — fiksna cena, fiksan rok, bez iznenađenja.

Pošalji upit +381 61 224 8989