GreenSock Animation Platform (GSAP)

GSAP е лесният начин да правите бързи и оптимизирани анимации с JavaScript. Може да се използва за паралакс ефекти, макар и да не е ограничен само до такива.

Защо да ползваме точно GSAP?

Защото е стабилна библиотека. Фирмата, която стои зад разработката ѝ е на пазара още отпреди изобщо да има CSS анимации. Преди години масово за анимации в мрежата се използваше Flash Player. GreenSock разработват първоначално са разработвали библиотеки за анимации за ActionScript (скриптовия език на Flash Player).

Тъй като ActionScript е базиран на чернова за ECMAScript 4. Последния трябваше да се превърне в JavaScript 4 някъде около 2009 – 2010 (според кога черновата се превърнеше в белова), но срещна отпор от страна на Microsoft и така и не видя бял свят. Вместо това получихме JS5, който макар и да имаше доста иновации, беше по-близък до JS3, отколкото JS4.

Какво изобщо значат всички тези версии?

Значат, че програмисти запознати с ActionScript са на малка крачка от познания и по JavaScript. Така че когато пазарния дял на Flash Player е намалял, а браузърите вече са били способни на CSS transitions, transformations и animations, GreenSock са мигрирали работата си към JavaScrpt. И тъй като двете имат множество допирни точки според дефиницията си, в общи линии само са надграждали.

Така че, не сте ли склонни да се доверите на фирма, която се занимава с това от повече от 10 години? Аз съм и смятам, че сам не бих могъл да постигна бързодействието, което те предлагат.

Как да ползваме GSAP?

Да си дойдем на думата. Платформата предлага 4 библиотеки (реално са 2, като всяка си има олекотена и пълна версия):

  1. TweenLite
  2. TweenMax
  3. TimelineLite
  4. TimelineMax

Интересното е точно кое какво съдържа.

TimelineMax съдържа в себе си TimelineLite и го надгражда. Звучи доста естествено, нали?

TweenMax обаче съдържа не само TweenLite, но и TimelineMax (в следствие, от което и TimelineLite). Освен, че съдържа другите 3 съдържа и още камара plugin-и. С други думи – съдържа всичко.

Все пак не забравяйте, че добавянето на TweenMax на страниците ви няма да ви даде само гъвкавостта на всичко, но и ще зарежда малко по-бавничко.

TweenLite

В този урок ще разгледаме само някои основни положения в GSAP и затова ще използваме само TweenLite. Така де, ще се наложи да включим и един от plugin-ите: CSSPlugin, за да се уверим, че ще можем правилно да анимираме CSS стойности на елементи.

TweenLite самостоятелно може да се използва да променя всякакви произволни атрибути / property-та от една стойност до друга.

Можете да имате просто:

const person = { age: 10 };

и посредством TweenLite да промените стойността на age от 10 до 20 (примерно) през определен период от време.

Ако тази стойност е пряко обвързана (bind-ната) с нещо друго, което правите на страницата, това пак може да доведе до анимация.

Добавяйки CSSPlugin обаче, TweenLite ви позволява лесно да анимирате всякакви CSS property-та на DOM елемент. Даже самичък си ги засича през element.style.property.

Някои други възможности, които добавя са:

  • това да се грижи за особености при някои браузъри
  • оправя vendor prefix-и (ако има нужда)
  • оптимизиране на бързодействието
  • автоматично засичане и преизчисляване на мерни единици (px, em, % и всичко останало)
  • възможност за анимиране на сложни стойности като background-position: 0 0, border-radius: 5px 5px 0 0, box-shadow: 5px 5px 0 10px rgba(0, 0, 0, 0.2) и други
  • анимиране на цветове (rgb, rgba, hsl, hsla, hex

Код

Вероятно обаче не четете тази статия само за приказките по-горе. Искате да видите и как да ползвате GSAP в реален код.

Подготвил съм един простичък пример.

HTML

Първо нека си добавим една почти празна страница с един бутон, който ще анимираме:

<!DOCTYPE html>
<html>
<head>
	<title>GSAP Test</title>
</head>
<body>
	<button>Change Size</button>
</body>
</html>

CSS

Под <title> тага можем inline (за да не се занимаваме с много файлове в този прост пример) да добавим и малко основен CSS (reset + прости стилове за центриране на бутона):

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }

body { display: flex; justify-content: center; align-items: center; background: #E0E0E0; color: #333; font: normal 14px/1.35 Arial, Helvetica, sans-serif; }

button { padding: 3px 8px; width: 100px; height: 30px; }

JavaScript

Сега идва времето да добавим и JavaScript-а.

Първо трябва да добавим самата библиотека.

Можете да си изтеглите файловете от GitHub: https://github.com/greensock/GreenSock-JS/ или да си набавите CDN линкове от https://greensock.com/?download=GSAP-JS.

Последното ви позволява да конфигурирате какво точно да изтеглите чрез опцията Customize:

Така че може да вмъкнете просто:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>

След това нека вземем референция към бутона:

const btn = document.querySelector('button');

И при click да го накараме да се анимира за 0.5 секунди до два пъти по-големи стойности:

btn.addEventListener('click', e => {
	TweenLite.to(btn, 0.5, { width: 200, height: 60 });
});

Easing

Нека обаче добавим и easing функция, за да става анимацията по-естествено, а не чисто линейно:

btn.addEventListener('click', e => {
	TweenLite.to(btn, 0.5, { width: 200, height: 60, ease: Power3.easeInOut });
});

GSAP идва с вградени опции за easing. Основните са степени от 0 (линейна анимация) до 4, а освен тях има и други като ластик, подскачане, забавен кадър, експонента, синусоида и други.

Интерактивен пример на всички можете да видите на сайта им: https://greensock.com/docs/Easing.

В нашия случай използваме Power3 за подчертан ефект. Всяка easing функция всъщност е представена като обект, който има property-та за easeIn, easeOut и easeInOut.

Динамични стойности

Стойностите, до които анимираме можем да зададем не просто като константа, ами директно да подадем с callback функция. И вече според резултата от функцията да анимираме до различна стойност.

Нека направим бутона всеки път да анимира размерите си до произволна стойност. Все пак нека не е напълно произволна, а бъде ограничена до минимум 100px широчина и 30px височина (както е оригинално в CSS-а). И нека максималните му размери са 300px широчина и 90px височина:

btn.addEventListener('click', e => {
	TweenLite.to(btn, 0.5, {
		width: () => 100 + Math.random() * 200,
		height: () => 30 + Math.random() * 60,
		ease: Power3.easeInOut
	});
});

Така всеки път когато кликнете на бутона той ще променя размера си.

TweenLite.from

Освен да анимираме „до“ стойност, можем да анимираме и „от“ стойност. Удобно е когато примерно искаме да покажем нещо с анимация от splash screen до крайно състояние.

В момента си имаме стартови стилове на бутона (преди да е бил кликнат). Нека го накарем да се анимира до тях от бидейки прозрачен и малко по-нагоре на екрана. Все едно пада и става видим:

TweenLite.from(btn, 0.5, { opacity: 0, ease: Power2.easeIn });
TweenLite.from(btn, 0.5, { y: -100, ease: Power1.easeOut });

Използвам 2 анимации, тъй като искам да има различни easing функции. Получаването на видимост да започва плавно, а към края вече забързва да се допокаже. А „падането“ да почва бързо, като накрая забавя, че да не „тупне“ на земята, а вместо това се „приземява“ леко.

Пример

И накрая разбира се нека видим пример за всичко това на https://magadanski.com/demo/parallax-GSAP/.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Magadanski.com