Tworzenie złożonych animacji na stronie internetowej jest problematyczne z wielu powodów. Ba, nawet zdawałoby się proste animacje mogą przysporzyć nie małego kłopotu web deweloperom. Tak powszechne elementy jak slajder, efekt parallax czy masonry nie są łatwe do zakodowania w taki sposób aby działały niezawodnie na szerokiej gamie przeglądarek i bardzo rzadko są kodowane od podstaw. Do realizacji wspomnianych efektów programiści używają popularnych bibliotek. Splide.js wykorzystamy do zakodowania slajdera, Glightbox do zakodowania pełnoekranowej galerii zdjęć a efekt paralaksy szybko uzyskamy wykorzystując Jarallax. Są to konkretne propozycje bibliotek i oczywiście istnieje wiele popularnych alternatyw.
Te liczne biblioteki i gotowe skrypty są tworzone przez wielu różnych programistów i rzecz jasna nie są w żaden sposób ujednolicone. Konkretna biblioteka jest stworzona do zazwyczaj jednego konkretnego celu i nie ma co liczyć na to, że wtyczka do tworzenia masonry przyda się nam do czegoś innego. Poleganie na tych konkretnych rozwiązaniach ma zarówno swoje plusy i minusy. Całkiem innego podejścia wymaga tworzenie kreatywnych animacji i zaawansowanych przekształceń na elementach SVG, nie wspominając o skomplikowanych animacjach, które synchronizujemy na osi czasu. Należy pamiętać, że istnieją kreatywni front-endowcy, którzy są zawieszeni pomiędzy projektowaniem a programowaniem. Połączenie zdolności projektowania i programowania umożliwia tworzyć unikalne doświadczenia za pomocą dynamicznych interfejsów. Tworzenie kreatywnych animacji jest czasochłonne jeżeli ograniczymy się do Vanilla JavaScript i tego co oferuje CSS3 bo jest to po prostu zbyt trudne. W tym artykule przyjrzymy się popularnej bibliotece, która rozwiązuje szereg problemów z jakimi musimy się mierzyć kiedy tworzymy animacje na stronie internetowej.
Co to jest GSAP?
GSAP (ang. GreenSock Animation Platform) to biblioteka JavaScript do tworzenia złożonych animacji, której przeznaczeniem są przeglądarki internetowe. W skład GSAP wchodzi rdzeń GSAP Core i szereg dodatków, takich jak wtyczki, gotowe funkcje łagodzące (ang .easing) oraz funkcje użytkowe.
Z technicznego punktu widzenia, animacja w świecie przeglądarek internetowych sprowadza się do zmiany wartości pewnych właściwości elementów DOM na osi czasu. Płynny efekt poruszania się jakiegoś elementu w przeglądarce można uzyskać poprzez manipulację wartościami margin, top, bottom, left right lub transform wielokrotnie w małym odstępie czasu. Dla obracania powstała właściwość rotate a zanikanie i efekt przezroczystości uzyskamy za pomocą właściwości opacity.
Przykładowo, zmiana współrzędnej x obiektu z 0 na 1600 w ciągu 5 sekund spowoduje, że przesunie się on szybko w prawą stronę. Stopniowa zmiana wartości opacity od 0 do 1 spowoduje pojawienie się elementu. Zadaniem kreatywnego front-endowca animatora jest zdecydowanie, które właściwości zmienić, jak szybko i jakich użyć przyspieszeń. Dlatego GSAP można traktować jako zaawansowany manipulator właściwości DOM, SVG, Canvas itp…
GSAP istnieje na rynku od wielu lat i zdobył szeroką popularność w śród profesjonalnych designerów i agencji interaktywnych. Na stronie GreenSock jest informacja, że korzysta z niego już ponad 11 milionów stron internetowych z czego część należy do światowych i popularnych marek. Kiedy sprawdzamy technologie użyte do budowy kreatywnych stron internetowych promowanych na stronach typu AWWWARDS, okazuje się, że faktycznie około 80% prac zawierających kreatywne animacje używa GSAP.
Fraza GSAP w ostatnich 5 latach konsekwentnie zyskuje na popularności, dlatego warto zainteresować się tą technologią jeżeli chcemy tworzyć złożone animacje a tym bardziej kiedy chcemy synchronizować je na osi czasu.
Zalety GSAP
Jedną z najczęstszych zalet wymienianych przy bibliotece GSAP jest wydajność pod kątem animacji i częstotliwość odświeżania animacji na sekundę. Według twórców i społeczności skupionej wokół GSAP wydajność jest najważniejsza, zwłaszcza na telefonach i urządzeniami ze stosunkowo słabymi procesorami. Doskonale płynna animacja to znak rozpoznawczy GSAP Core i dodatków dostępnych za darmo oraz w ramach specjalnej subskrypcji. GSAP przewyższa stare „standardy branżowe” o około dziesięć razy w warunkach stresu. Twórcy GSAP zachęcają do wykonywania własnych testów pod tym kątem.
Drugą zaletą jest szeroka kompatybilność. HTML, SVG, React, Vue, Angular, jQuery, Canvas, CSS, nowe i stare przeglądarki, urządzenia mobilne i nie tylko – GSAP powinien sobie poradzić w każdej sytuacji. GSAP „po prostu działa”. Sensowność wykorzystywania GSAP bardzo przypomina wykorzystywanie w przeszłości jQuery aby radzić sobie z problemem kompatybilności pod kątem interpretacji kodu JavaScript w różnych przeglądarkach.
Modularność, elastyczność i rozszerzalność to kolejna zaleta GSAP. Modułowa, elastyczna i wydajna architektura wtyczek zapewnia szczelność rdzenia silnika, umożliwiając jednocześnie dodanie praktycznie dowolnej funkcji za pomocą opcjonalnych wtyczek.
Brak zależności od innych popularnych bibliotek np. jQuery. Zapewnia to prostotę wdrożenia na obecnej stronie oraz większą wydajność pod kątem prędkości ładowania się witryny.
Zaawansowane sekwencjonowanie i oś czasu to kolejny znak rozpoznawczy GSAP. Nie jesteśmy ograniczeni do sekwencjonowania „jeden po drugim”. Możemy zagnieżdżać osie czasu w innych osiach czasu. Wstawianie przerw, funkcji callback i przesuwanie animacji jest intuicyjne i proste. Zyskujemy dzięki temu precyzyjną kontrolę nad synchronizacją animacji w czasie bez nadmiarowego kodu.
Duża popularność powoduje, że przybywa coraz więcej inspirujących realizacji, samouczków i tutoriali.
Rozbudowana dokumentacja, poszerzająca się społeczność i wiele prac demonstracyjnych to kolejna zaleta GSAP. To bardzo pomocne, tym bardziej kiedy uczymy się animowania w środowisku Web i stawiamy pierwsze kroki w technologii GSAP.
Wady GSAP
Choć GSAP i większość popularnych wtyczek jest darmowa, niektóre wtyczki są płatne i udostępniane tylko w ramach płatnej subskrypcji.
Jak każda biblioteka JavaScript dodaje do strony dodatkowe pliki JS, które mogą obniżać wydajność strony internetowej. Zminimalizowany plik samego GSAP Core zabiera 63,7 KB. Sprawdź techniki optymalizacji JavaScript na stronach internetowych, które są w stanie zminimalizować wpływ takich plików na ścieżkę krytyczną.
Instalacja GSAP i przykład wykorzystania
Instalacja GSAP nie różni się od instalacji jakiejkolwiek innej biblioteki JavaScript do tworzenia efektów i animacji. Przed znacznikiem zamykającym </body> dodajemy link do GSAP Core:
<source src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></source>
Po podłączeniu GSAP Core do naszej strony, możemy wykorzystać dostępne wtyczki, jedną z najpopularniejszych z nich jest ScrollTrigger.
<source src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></source>
Po tych działaniach możemy przystąpić do tworzenia pierwszych animacji. Słowo kluczowe gsap i następująca po znaku kropki metoda animowania wyzwala animacje na wybranym obiekcie DOM:
gsap.from('.header', {opacity:'0'});
Powyższa linijka spowoduje nadanie elementowi z klasą header wartości 0 dla opacity. Animacja w ciągu pół sekundy dokona animacji od wartości 0 do 1 – ponieważ taka wartość jest zadeklarowana w CSS domyślnie co spowoduje płynne pojawienie się tego elementu.
Animacja może polegać na zjeżdżaniu naszego przykładowego nagłówka od górnej krawędzi:
gsap.from('.header', {y:'-100%'});
W ciągu 500ms płynna animacja powoduje pojawienie się nagłówka z najazdem od góry. Załóżmy że chcemy wydłużyć czas animacji do 2 sekund. Wystarczy użyć właściwości duration:
gsap.from('.header', {duration:2, y:'-100%'});
Dla celów tutorialu załóżmy, że chcemy animować tekst, który znajduje się bezpośrednio pod nagłówkiem. Chcemy aby animacja wykonała się po animacji nagłówka dlatego dodamy opóźnienie:
gsap.from('.main-text', {delay:2, duration:2, y:'-100%'});
A pod tą animacją niech jest jeszcze kolejny element znowu opóźniony o 2 sekundy:
gsap.from('.secondary-text', {delay:4, duration:2, opacity:'0'});
Oś czasu czyli timeline w GSAP
Zauważmy teraz, że opóźnienie pojawienia się tekstu jest powiązane z czasem trwania animacji nagłówka. Przy tworzeniu takich łańcuchów bardzo czasochłonne będzie dopasowywanie wartości opóźnienia kiedy z jakiegoś powodu będziemy chcieli skrócić czas trwania animacji poprzedzających inne animacje. Z perspektywy kodu źródłowego wartości delay „2” i „4” to tzw. magiczne liczby, które programista wylicza na bieżąco wywołując kolejne metody from. Z tego powodu GSAP wprowadził oś czasu – timeline, dzięki czemu piszemy mniej kodu a panowanie nad łańcuchem animacji jest znacznie ułatwione. Ten przykład można znacznie skrócić:
var timeline = gsap.timeline({defaults:{duration: 2}});
timeline
.from('.header', {y:'-100%'})
.from('.main-text', {opacity:'0'})
.from('.secondary-text', {opacity:'0'});
Wydawało by się, że teraz kod jest mniej elastyczny bo nie można przesuwać momentu wyzwalania się animacji na osi czasu – nic bardziej mylnego. Twórcy GSAP przewidzieli tego typu sytuacje a moment wyzwalania animacji można przesuwać w czasie. Załóżmy że chcemy przesunąć moment wyzwalania się animacji dla animacji elementu z klasą main-text o +0.5 sekundy ale dla elementu secondary-text przesunąć ten moment o -1 sekundę:
timeline
.from('.header', {y:'-100%'})
.from('.main-text', {opacity:'0'}, '>0.5')
.from('.secondary-text', {opacity:'0'}, '<1.0');
Wpisując opóźnienie bez znaku większości i mniejszości po prostu tak jakby nadpisujemy wartość delay i uniezależniamy tę wartość od osi czasu:
timeline
.from('.header', {y:'-100%'})
.from('.main-text', {opacity:'0'}, 2.5)
.from('.secondary-text', {opacity:'0'}, 3);
Wybrane wtyczki GSAP
GSAP ułatwia pracę nad animacjami dostarczając szereg wtyczek, które rozwiązują częste przypadki użycia. Niektóre z nich to:
- ScrollTrigger – ułatwia tworzyć animacje reagujące na przewijanie strony przy stosunkowo małej ilości kodu. Wyzwalacze mogą ale nie muszą mieć związek z jakimikolwiek animacjami.
- SplitText – to wtyczka, która ułatwia na dzielenie tekstu na linie, słowa oraz pojedyncze litery.
- MotionPathPlugin – pozwala w łatwy sposób tworzyć ścieżki ruchu (motion path) za pomocą SVG lub tablicy punktów elementów DOM, SVG lub Canvas.
- ScrollSmoother – dodatek do ScrollTrigger który wygładza przewijanie na stronie internetowej bez obniżenia jej dostępności i potrzeby symulowania pasków przewijania.
Przykłady stron stworzonych przy użyciu GSAP
Nie ma sensu abym przepisywał kod przykładów lub zamieszczał tutaj linki do konkretnych prac z CodePen. Zapraszam do galerii i dokumentacji GSAP aby zobaczyć jakie efekty jesteśmy w stanie uzyskać za pomocą tej biblioteki:
Podsumowanie – czy warto używać GSAP?
GSAP to bardzo atrakcyjna technologia, która ułatwia tworzenie zaawansowanych i płynnych animacji na stronie internetowej. Dodatkowe wtyczki GSAP często rozwiązują popularne przypadki użycia i odpowiadają na najnowsze trendy i potrzeby rynku. Animacje i efekty wizualne to już stały element nowoczesnych stron internetowych. Przewiduję, że już niedługo znajomość technologii GSAP lub podobnej alternatywy będzie wymagana aby tworzyć atrakcyjne strony i sklepy internetowe.
Odpowiedz lub skomentuj