MerixGames

4 lutego 2016

/ code & tools

Jak animować stronę internetową za pomocą frameworka GSAP - poradnik

Marcin Wasilewski

Podczas mojej pracy jako Front End Developer wielokrotnie oczekiwano ode mnie efektu „wow” podczas pracy nad projektem. Dostawałem wtedy często ilustracje, które musiałem ożywić i zaanimować, na co zawsze z pomocą przychodził mi niezastąpiony GSAP!

Czym jest GSAP?

GSAP, czyli GreenSock Animation Platform, jest frameworkiem Javascript służącym do animacji elementów strony internetowej. Tym, co wyróżnia to narzędzie na tle konkurencji, jest duża kompatybilność z przeglądarkami, wysoka wydajność i kontrola nad animacjami, jakiej nie uzyskamy przy pracy z CSS lub jQuery.animate();

Platfoma GreenSock składa się z dwóch głównych modułów:

  • TweenMax/TweenLite – odpowiada za animacje,
  • TimelineMax/TimelineLite – umożliwia tworzenie i zarządzanie sekwencjami animacji.

Jak łatwo się domyślić, wersje Max i Lite różnią się od siebie wagą pliku i zaawansowaniem opcji dodatkowych. Wersja Light wystarcza do pracy na większości animacji, jednakże, jeżeli potrzebna będzie nam np. funkcja repeat() odpowiadająca za powtórzenia animacji, to koniecznym jest wykorzystanie TweenMax’a.

Pierwsze kroki w pracy z GSAP

Mimo tego, że CSS umożliwia pracę z animacjami, to pozwala on jedynie na wybranie czasu trwania, opóźnienie animacji oraz pracę z kilkoma prostymi funkcjami łagodzącymi. GSAP pozwala zaś na pełną kontrolę nad animacją bez względu na jej stan  - możemy odtworzyć animację, zatrzymać ją w połowie czy zawrócić jej bieg w wybranym przez nas momencie i podwójnie przyspieszyć odtwarzanie.

Pierwszym rzeczą, jaką musimy zrobić, jest wczytanie odpowiednich skryptów na nasza stronę. Proponuję wybranie TweenMaxa, który zawiera całą bibliotekę w jednym pliku.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Zacznijmy od najłatwiejszych przykładów - składnia jest bardzo prosta:

TweenLite.to(element, czas, właściwości_animacji);
  • element – odwołanie do elementu DOM
  • czas – czas animacji podany w sekundach;
  • właściwości_animacji – tablica właściwości wraz z wartościami jakie mają się animować.

Pierwsza animacja

TweenLite.to(document.getElementById('image'), 2, {left: '90%'});

Ten krótki fragment odpowiada za przesunięcie elementu o id #image poprzez płynną zmianę właściwości „left” do wartości 90% w ciągu dwóch sekund.

Ten sam kod możemy uruchomić zamieniając funkcję .to() na .from(), dzięki czemu nastąpi animacja z podanych wartości do tych, które posiadał element w momencie uruchomienia animacji.

TweenLite.from(document.getElementById('image'), 2, {left: '90%'});

Wprawne oko zauważy w kodzie przykładu także funkcję .set(), która nadaje określone właściwości bez animacji. Możliwości GSAP nie ograniczają się oczywiście wyłącznie do prostego przesuwania obiektów, animować możemy także między innymi dowolne właściwości CSS.

TweenLite.fromTo(image, 1, {scale: 0, rotation: 360}, {scale: 3, rotation: 0, delay: 0.5, ease: Elastic.easeOut, onComplete: function() {alert('Done!')}});

W podanym przykładzie wykorzystana została funkcja fromTo(), która (oprócz podania docelowych wartości czy umożliwienia dodania wartości  od których animacja ma się rozpocząć) w tym wypadku animuje skalę i rotację. Dodatkowo zdefiniowałem, by animacja rozpoczynała się z półsekundowym opóźnieniem oraz ustawiłem specjalne „wygładzanie” (easings), co nadało całości dynamiki. Dzięki wywołaniu funkcji alert() po zakończeniu animacji wyświetlony zostanie także komunikat.

Oprócz animowania elementu do konkretnej wartości, co przedstawiłem wcześniej, możliwa jest także animacja o konkretną wartość. Uzyskać można ją wpisując „+=” lub „-=”, co modyfikuje wartość początkową o wskazaną wielkość. W tym wypadku wywołanie powyższego kodu spowoduje poszerzanie elementu o 20px.

TweenLite.to(image, 0.5, {width: '+=20', ease: Back.easeOut});

Funkcje wygładzające (easings)

Jednym z ciekawych dodatków w GSAP są dodatkowe funkcje wygładzające. Część z nich możesz znać z właściwości CSS transition lub animation (np. linear lub ease). TweenMax posiada ich dużo więcej, co jeszcze bardziej rozszerza możliwości GSAP!

Developerzy z GreenSock przygotowali świetne narzędzie przedstawiające oferowane przez GSAP easingi wraz z możliwością konfiguracji i gotowym kodem od użycia. Myślę, ze zapoznanie się z nim najlepiej wytłumaczy i zobrazuje dostępne możliwości .

Kilka najważniejszych metod TweenLite/Max

  • TweenLite/TweenMax(element, czas, zmienne) – konstruktor,
  • delay (numer) – czas w sekundach określający opóźnienie animacji,
  • duration ([numer]) – pobiera lub nadaje czas animacji,
  • ease (funkcja_wygładzająca) – definiuje „wygładzenie” animacji,
  • from (element, czas_animacji, właściwości_elementu) – metoda tworząca instancję, w której definiujemy animowany element, czas animacji podany w sekundach oraz tablicę wartości z których obiekt będzie animowany do wartości elementu jakie posiadał w momencie wywołania funkcji,
  • fromTo (element, czas_animacji, początkowe_zmienne, końcowe_zmienne) – metoda tworząca instancje animacji, w której podajemy animowany element, czas animacji w sekundach oraz dwie tablice(jedną z początkowymi, drugą z końcowymi wartościami animacji),
  • kill() – usuwa instancję animacji i nadane wartości z elementu,
  • onComplete (funkcja) – funkcja uruchamiana w momencie zakończenia animacji,
  • onStart (funkcja) – funkcja uruchamiana w momencie uruchomienia animacji,
  • onUpdate (funkcja) – funkcja uruchamiana co klatkę przez cały czas trwania animacji,
  • pause() – zatrzymuje odtwarzanie animacji,
  • play() – uruchamia animację,
  • progress([numer]) – pobiera lub nadaje progres animacji w przedziale od 0 do 1,
  • repeat() – definiuje liczbę powtórzeń animacji (tylko TweenMax),
  • repeatDelay() – definiuje opóźnienie dla powtórzeń (tylko TweenMax),
  • restart() – uruchamia ponownie animację i przywraca ją do początkowych wartości,
  • reverse() – zawraca bieg animacji,
  • set(element, właściwości_elementu) – natychmiastowo nadaje danemu elementowi podane właściwości (bez animacji),
  • timeScale(numer) – definiuje prędkość odtwarzania animacji - 1 to normalna prędkość (domyślnie), 0.5 oznacza podwójne zwolnienie, 2 podwójne przyspieszenie,
  • to(element, czas_animacji, właściwości_elementu) – metoda inicjująca instancję, w której definiujemy animowany element, czas animacji podany w sekundach oraz tablicę wartości, która przyjmie element w trakcie animacji,
  • yoyo() – co druga animacja zawiera funkcje reverse, w efekcie czego otrzymujemy animację powrotu do początkowych wartości (tylko TweenMax).

Wymienione metody są zaledwie częścią całego dostępnego pakietu – całość możecie poznać na oficjalnej stronie Greensock.

Oś czasu GSAP

Wszystkie możliwości biblioteki TweenMax poznamy łącząc ją z TimelineMax, dzięki czemu możliwe jest  łączenie animacji w sekwencje.

 

var tl = new TimelineLite();

tl.add(TweenLite.set(image, {scale: 0, rotation: 0, x: 0}) );

tl.add(TweenLite.to(image, 0.5, {scale: 1, ease: Back.easeOut}));

tl.add(TweenLite.to(image, 1, {x: 300, rotation: 180, ease: Power1.easeInOut}));

tl.add(TweenLite.to(image, 0.5, {scaleY: -1}));

tl.add(TweenLite.to(image, 0.5, {scaleX: -1}));

 

Jak widać w pierwszym wierszu kodu, do zmiennej tl przypisujemy nową oś czasu, w kolejnych wierszach za pomocą funkcji .add() dodajemy animacje, które poznaliśmy we wcześniejszych akapitach.
Wykorzystanie Timeline pozwala nam na wykonanie sekwencji animacji występujących jedna po drugiej. Animacje można również uruchomić w konkretnym czasie od momentu startu poprzez podanie wartości w sekundach jako drugiego argumentu do funkcji .add(). Całość wówczas prezentuje się następująco:

var tl = new TimelineLite({
    paused: true,
  delay: 0.5,
  onComplete: function() {
    alert('Done!');
  }
});
tl.add(TweenLite.set(image, {scale: 1, rotation: 0, x: 0}));
tl.add(TweenLite.to(image, 0.5, {scale: 0, ease: Back.easeIn}), 1.5);
tl.add(TweenLite.to(image, 1, {x: 300, rotation: 180, ease: Power1.easeInOut}), 0);
tl.add(TweenLite.to(image, 0.5, {scaleY: -1}), 0.25);
tl.add(TweenLite.to(image, 0.5, {scaleX: -1}), 0.5);

 Zauważyliście pewnie, ze mimo zachowania tej samej kolejności instrukcji, kolejność animacji jest inna.  Dzieje się tak ze względu na to, że ostatni parametr definiuje sekundę w której ma się uruchomić animacja. Co więcej, animacje mogą się na się na siebie nakładać - GSAP bez problemu sobie z tym poradzi!

* Pamiętajcie, metody jakie są dostępne dla TimelineLite/Max są analogiczne jak w przypadku TweenLite/Max.

Rozszerzenie i wykorzystanie możliwości GSAP

GreenSock udostępnia wiele pluginów. Mimo tego, że najciekawsze z nich są już niestety płatne, to nie przeszkadza to w darmowym łączeniu ze sobą animacji i tworzeniu naprawdę świetnych efektów. Dodatkowo TweenMax można łączyć z innymi bibliotekami, co znacznie rozszerza jego możliwości (patrz. ScrollMagic - uruchamianie animacji podczas scrollowania strony) . Warto zapoznać się z witryną i dokumentacją GSAP, która pozwoli Ci wykorzystać pełen potencjał drzemiący w bibliotece.

Alternatywne narzędzia

Istnieją alternatywy w postaci takich bibliotek jak Velocity, Transit lub jQuery.animate(), ale nie bez powodu Google rekomenduje właśnie GSAP! Spośród wszystkich dostępnych frameworków  to właśnie rozwiązanie stworzone przez GreenSock jest najbardziej elastyczne i wydajne. Potrzebujesz dowodów? Sprawdź porównanie wydajności kilku dostępnym frameworków do animacji na oficjalnej stronie Greensock.

Podsumowanie

Jak sam widzisz, GSAP wcale nie jest taki skomplikoway - wystarczy tylko nasz poradnik i sporo praktyki! ;) Miałem okazję pracować z tym frameworkiem w ramach wielu projektów. Jednym z nich był Back to The Frontend, który szczegółowo również opisałem na naszym blogu. Sprawdź sam, jak wyglądał proces tworczy w Merixstudio!

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.