Animacje na stronie www: GSAP vs CSS bez utraty wydajności

Za dużo ruchu i klient ogląda animację zamiast oferty. Za mało ruchu i strona wygląda jak szablon z 2019. Liczy się ile ruchu strona uniesie, zanim zacznie szkodzić Lighthouseowi i nerwom.

CSS wystarczy częściej, niż myślisz

Hover na przycisku, delikatne pojawienie sekcji przy scrollu, przejście koloru w menu, to wszystko da się zrobić w CSS. Bez biblioteki, bez client:load, bez 30 kB w bundlu.

Na stronach firmowych, które budujemy w Astro, domyślnie zostajemy przy CSS i IntersectionObserver na reveal. Netafoto ma reveal i lightbox w 44 liniach JS. Nie boimy się GSAP, po prostu fotografka nie potrzebuje choreografii hero na poziomie kampanii Adidas.

Reguła kciuka: jeśli animacja dotyczy jednego elementu i nie musi się synchronizować z innymi, CSS wygrywa.

Kiedy GSAP ma sens

GSAP wchodzi, gdy potrzebujesz:

• sekwencji wielu elementów (nagłówek → akapit → CTA, w tej kolejności, z kontrolą czasu),
• ScrollTriggera: pinowanej sekcji, scrubu, linii rysującej się przy scrollu,
• SVG albo ścieżek, których CSS nie ogarnie bez bólu,
• możliwości zabić wszystko naraz przy prefers-reduced-motion.

Na naszej stronie głównej ręce w hero, linia procesu i scramble tekstu to właśnie ten poziom. Bez biblioteki skończylibyśmy na spaghetti timeoutów.

Koszt: core GSAP to okolice 30 kB gzip. Przy Astro ładujemy go dopiero w sekcji, która go potrzebuje (client:visible). Kto nie dojedzie scrollem do procesu, nie płaci za JS procesu.

Co zabija wynik, a nie wygląda

Trzy rzeczy, które widzimy przy audytach:

1. Animacja na top / left / width zamiast transform i opacity: przeglądarka przelicza layout przy każdej klatce.
2. Biblioteka w <head> bez defer: blokuje LCP, żeby potem ładnie wjechał napis.
3. Reveal na wszystkim naraz: sto elementów z observerem przy starcie to INP w stylu „kliknąłem i nic”.

To zwykle JS, który odpala się za wcześnie i robi za dużo, psuje wynik bardziej niż sama animacja.

Preferencje użytkownika to nie ozdoba

prefers-reduced-motion: reduce oznacza, że ktoś włączył to w systemie, bo ruch go męczy albo wywołuje zawroty. Strona powinna wtedy wyłączyć choreografię i zostawić stany końcowe. WCAG tego oczekuje; my traktujemy to jako obowiązkowy warunek oddania projektu.

Ile to kosztuje w wycenie

Proste CSS (hover, fade, menu) siedzi w cenie strony. Osobna sekcja hero ze ScrollTriggerem albo rozbudowana ścieżka na homepage kosztuje zwykle 800–2500 zł zależnie od złożoności. Nie sprzedajemy „pakietu animacji”. Sprzedajemy konkretny ruch w konkretnym miejscu.

Kiedy wybrać co

Zaczynaj od CSS. Sięgaj po GSAP, gdy masz sekwencję albo scroll, którego nie da się sensownie napisać inaczej. Mierz na telefonie, nie na desktopie z Wi‑Fi. Jak nie wiesz, czy Twój projekt uniesie ruch, napisz, powiemy wprost, gdzie go uciąć.