podstawy animacji z wykorzystaniem GSAP

GSAP (GreenSock Animation Platform) to bardzo popularna biblioteka JavaScript do tworzenia animacji — znacznie wydajniejsza i wygodniejsza niż czysty CSS czy requestAnimationFrame.

GSAP działa na zasadzie „powiedz co ma się zmienić i w jakim czasie”. Zamiast pisać skomplikowaną logikę, piszesz w ten sposób w js:

gsap.to(".box", {
  x: 200,
  duration: 1
});

Co daje efekt:

• .box – element (CSS selector)
• x: 200 – przesuń o 200px w osi X
• duration: 1 – w 1 sekundę

1. Dodanie GSAP – opcja CDN

jako script z src=”https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js”

W WordPress (functions.php)

wp_enqueue_script(
  'gsap',
  'https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js',
  [],
  null,
  true
);

2. Podstawowe metody

• gsap.to() – animacja DO wartości
• gsap.from() – animacja OD wartości
• gsap.fromTo() – pełna kontrola stanu przed i po

Najważniejsze właściwości

• x, y – przesunięcie
• scale – powiększenie
• rotation – obrót
• opacity – przezroczystość
• duration – czas
• delay – opóźnienie
• backgroundColor – zmiana koloru tła elementu
• repeat – powtórzenie, repeat:-1 to infinite
• yoyo – ustawione na true daje efekt odwrócenia animacji od tyłu do przodu, najlepiej działa przy parzystych wartościach właściwości repeat
• ease – styl animacji
  • „power1.out” – naturalne
  • „bounce.out” – odbicie
  • „elastic.out(1, 0.3)” – sprężyna
• stagger – używane przy animacji grupy obiektów (np. wszystkie .box w danej .section, NodeList) – sposób na opóźnianie animacji wielu elementów jeden po drugim zamiast odpalania ich naraz, daje efekt „fala / sekwencja”

stagger – odstęp czasowy między animującymi się elementami

ustawiony na stagger: 0.2 daje efekt sekwencji:

• pierwszy element startuje
• po 0.2s drugi
• po 0.2s trzeci

Rozbudowane ustawienia:

stagger: {
  each: 0.2,
  from: "start"
}

from – skąd zaczyna się animacja
opcje:

• „start” – od pierwszego
• „end” – od ostatniego
• „center” – od środka
• „edges” – od krawędzi
• „random” – elementy animują się w losowej kolejności

Timeline

Timeline pozwala łączyć animacje, tak by wykonały się po kolei, zakończenie jednej daje początek następnej.

let tl = gsap.timeline();

tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { y: 100, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 });

overlap – pozwala ustawić precyzyjniej kolejność animacji w Timeline.

tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { y: 100, duration: 1 }, "-=0.5");

druga animacja zacznie się 0.5s wcześniej.
Możemy też ustawić do animacji ten sam label (np. 'anim1′), dzięki temu wszystkie z takim samym labelem wykonają siew tej samej chwili.

ScrollTrigger

Pozwala na uzyskanie płynnej animacji przy scrollu.
Dodajemy po skrypcie głównym gsap, skrypt ScrollTrigger
src=”https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js”

gsap.from(".box", {
  y: 100,
  opacity: 0,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    toggleActions: "play none none none"
  }
});

toggleActions – kontrola tego, co ma się dziać z animacją w zależności od scrolla. Decyduje, czy animacja się: odpali, zatrzyma, cofnie czy zrestartuje.

4 wartości — każda odpowiada konkretnej sytuacji scrolla:

1. onEnter – gdy element wchodzi w viewport (scroll w dół)
2. onLeave – gdy element wychodzi z viewport (scroll w dół)
3. onEnterBack – gdy wracasz do elementu (scroll w górę)
4. onLeaveBack – gdy całkiem go opuszczasz (scroll w górę)

Każde pole może mieć wartość:

• play – odtwórz animację
• pause – zatrzymaj
• resume – kontynuuj
• reverse – odtwórz wstecz
• restart – od nowa
• reset – wróć do startu
• complete – przeskocz do końca
• none – nic nie rób

Przykłady:

• toggleActions: „play none none none” – jednorazowa animacja, odpali się raz, nie cofnie się
• toggleActions: „play reverse play reverse” – animacja w obie strony, scroll w dół – animacja start, scroll w górę – animacja się cofa
• toggleActions: „play reset play reset” – reset po wyjściu, za każdym razem zaczyna od nowa
• toggleActions: „play none restart none” – restart przy powrocie, wracasz do sekcji → animacja od nowa