Front-end

GSAP

Biblioteka animacji JavaScript

GSAP to biblioteka JavaScript do animacji na stronach – od prostych wejść elementów po sekwencje sterowane przewijaniem przez wtyczkę ScrollTrigger.

Oficjalna strona

Czym jest GSAP?

GSAP (GreenSock Animation Platform) to biblioteka JavaScript do animowania elementów HTML, SVG i canvas, a także dowolnych liczbowych właściwości obiektów JavaScript, np. w scenach three.js. Ruchy układa się w osie czasu (timeline), a wtyczka ScrollTrigger wiąże je z przewijaniem strony. Biblioteka nie zależy od frameworka i od 2024 roku należy do Webflow.

Jak używamy tego w Koda Plus

GSAP napędza animacje samej strony koda.plus: odsłanianie sekcji przy przewijaniu przez ScrollTrigger, wejście treści w sekcji hero ułożone na osi czasu i animację okna kontaktowego. W realizacjach na Webflow użyliśmy go w witrynach WJ Investment i Firmy Inwestycyjnej JW oraz na stronie agencji PR z migracją bloga. Na stronach w Astro animacje realizujemy głównie CSS-em i GSAP-em, a gdy odwiedzający ma włączone w systemie ograniczenie ruchu, pomijamy je.

Wykorzystywane w

Zobacz realizacje

W ofercie

Kiedy to ma sens

  • Animacje mają być powiązane z przewijaniem strony
  • Sekwencja kilku ruchów wymaga precyzyjnej osi czasu
  • Efekt wykracza poza to, co wygodnie zrobić w samym CSS
  • Witryna w Webflow potrzebuje animacji pisanych kodem

Najczęstsze pytania
GSAP

  • GSAP czy animacje CSS?

    Proste przejścia i efekty najechania wystarczy zrobić w CSS. GSAP opłaca się przy sekwencjach, animacjach sterowanych przewijaniem i ruchu zależnym od kursora, gdzie w samym CSS trudno zapanować nad kolejnością i czasem.

  • Czy animacje GSAP spowalniają stronę?

    Nie muszą. Najlepiej animować transformacje i przezroczystość, które przeglądarka obsługuje wydajnie, zamiast szerokości, wysokości czy marginesów, które wymuszają przeliczanie układu. Bibliotekę warto też ładować tylko na stronach, które z niej korzystają.

  • Czy GSAP działa z Webflow i Astro?

    Tak. GSAP nie zależy od frameworka – w Webflow ładuje się go jako skrypt w kodzie strony, a w Astro importuje w skryptach komponentów. Ten sam kod animacji można przenosić między projektami.

Bezpłatne, 15-minutowe spotkanie

Opowiedz nam o swoim projekcie,
resztę dopasujemy pod Ciebie

15 minut rozmowy wystarczy, abyśmy wiedzieli, czy pasujemy do Twojego projektu.
Zaczynamy od Twoich potrzeb, nie od gotowego rozwiązania.

Skontaktuj się z nami

Remigiusz w granatowej koszuli i okularach

Remigiusz Mielcarz

Korzystam z iMessage Korzystam z WhatsApp
Adrian w szarym golfie i okularach

Adrian Mrósk

Korzystam z iMessage Korzystam z WhatsApp