Animacje na stronie internetowej - poradnik GSAP
Istnieje wiele sposobów na dodanie widowiskowych animacji na naszej stronie. W tym wpisie skupimy się na jednym z podejść, dzięki któremu w szybki sposób uzyskamy naprawdę ciekawe efekty wizualne. Przyjrzymy się bibliotece GSAP - GreenSock, a następnie omówimy podstawowe koncepcje oraz podejścia, dzięki którym będziemy w stanie wykonać przyjemną dla oka animację. Omawianą wersją biblioteki w tym artykule jest wersja 3.
Czym jest GSAP?
Jest to biblioteka, która udostępnia nam metody do łatwego dodawania oraz zarządzania animacjami na naszej stronie internetowej. Większość funkcjonalności udostępniana jest za darmo, jednak w przypadku kilku naprawdę fajnych elementów, takich jak zaawansowane animacje SVG, należy posiadać licencję. My jednak skupimy się na darmowych częściach tej biblioteki.
Animowanie elementów DOM
Pierwszą metodą, jakiej działanie poznamy jest gsap.to(). Przyjmuje ona trzy argumenty, pierwszym z nich jest element animowany. Możemy go podać w formie selektora lub też elementu DOM. Drugi argument przyjmuje natomiast obiekt z konfiguracją naszej animacji. Trzeci argument odpowiada natomiast za pozycję wywołania animacji względem osi czasu.
Przy konfiguracji naszej animacji możemy posłużyć się takimi opcjami jak:
- x - zmiana obiektu w osi x,
- y - zmiana obiektu w osi y,
- z - zmiana obiektu w osi z,
- rotation - zmiana obiektu za pomocą obrotu,
- transformOrigin - zmiana punktem obrotu,
- scale - zmiana wielkości obiektu,
- skew - zmiana wielkości obiektu ,
- perspective - zmiana perspektywy,
- opacity - zmiana przezroczystości obiektu,
- delay - opóźnienie animacji,
- duration - określa czas, w jakim zostanie wykonana nasza animacja,
- Ease - określa tempo wykonywania animacji.
Szczegółowe opisy oraz inne właściwości znajdziesz pod tym adresem.
Oś czasu
W przypadku gdy chcemy skomponować kilka animacji po sobie, warto posłużyć się metodą gsap.timeline(). Dzięki niemu możemy sekwencjonować wykonywanie naszych animacji. Bez tej metody, w celu uzyskania podobnego efektu musieliśmy posiłkować się właściwością delay. Podejście wykorzystujące oś czasu znacznie upraszcza nasz kod. Natomiast optymalizacja naszego kodu przyczynia się do jego łatwiejszego utrzymania.
Metoda gsap.timeline() przyjmuje jako pierwszy argument obiekt konfiguracyjny, w którym możemy ustawić czas, po jakim mają zostać wykonywane następne animacje lub też ustawić zapętlanie animacji.
Trzeci argument jest odpowiedzialny za to, w którym momencie ma zostać wykonana animacja w naszej sekwencji animacji. Podanie wartości “-=1”, spowoduje jej wykonanie 1 sekundę przed zakończeniem poprzedniej, natomiast podanie wartości “+=1” wykona animację sekundę po wykonaniu się poprzedniej.
Tempo animacji
W celu manipulowania tempem animacji możemy skorzystać z właściwości “ease”. Dostępne są dla nas następujące wbudowane wartości:
- none,
- power1,
- power2,
- power3,
- power4,
- back,
- elastic,
- bounce,
- rough,
- slow,
- steps,
- circ,
- expo,
- sine.
Wszystkie te wartości oraz to, jak zachowują się elementy po ich zastosowaniu, możemy sprawdzić pod tym adresem. Możemy również przy pomocy narzędzia znajdującego się pod powyższym linkiem stworzyć własne tempo animacji.
Różne metody animowania
W zależności od efektu, jaki chcemy uzyskać oraz od punktu, w którym mamy zamiar rozpocząć naszą animację, mamy do dyspozycji takie metody jak:
- gsap.from(),
- gsap.fromTo(),
- gsap.to().
Dzięki tym opcjom jesteśmy w stanie wykonać praktycznie każdy efekt, jaki zapragniemy. Dla przykładu poniżej zamieściłem przykładowy kod dla hamburger menu w wersji star wars.
Podsumowanie
GSAP to biblioteka, która daje nam wiele możliwości. W tym artykule przedstawiłem jedynie ich ułamek. Zachęcam Cię do głębszego zapoznania się z tą biblioteką, ponieważ przy jej użyciu w szybki sposób wykonasz imponującą animację. Oficjalna dokumentacja to najlepsze źródło wiedzy, do którego odsyłam Cię po więcej informacji.
