GSAP. Як працює JavaScript-бібліотека для анімацій

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Вітаю! Мене звати Віктор, я front-end розробник на випробувальному терміні у компанії. Хочу поділитись зручною і потужною бібліотекою для анімацій — GSAP. Сподіваюся, що стаття буде цікавою для front-end розробників, які цікавляться вивченням нових для себе технологій.

Роль анімацій у вебі

Всі ми знаємо, як важлива анімація у сучасному вебі, вона допомагає якісніше подати інформацію, привертає на себе увагу і підштовхує досліджувати кожен анімований клаптик вебсайту.

У веброзробці існує кілька типів анімацій, що можуть бути застосовані на вебсайтах:

1. CSS анімації;
2. SVG анімації — вони використовують масштабовані векторні графічні об’єкти (SVG), щоб створити рухомі ефекти;
3. JavaScript анімації — створюються за допомогою JavaScript-коду, який змінює властивості елементів HTML або SVG;
4. WebGL анімації (Web Graphics Library) — це анімації, що використовують WebGL, щоб створити складні 3D-сцени та інші реалістичні ефекти.

Труднощі в роботі Front-end та анімацій

Частина фронтендерів мене зрозуміють. Бувало таке, що тобі дають дизайн, ти його уважно досліджуєш, в голові розкладаєш по поличках, з чого будеш починати, на що звернути особливу увагу.

І тут виявляєш вкладку у Figma з підписом Animations. І в голові тільки одне...

Переглядаючи всі анімації на дизайні, ти думаєш: «В цілому, якщо зліпити їх всі в один ролик, вийшов би непоганий мультфільм від Disney.»

У такі моментіи видно досвід дизайнера. Новачок буде малювати 3D-сцени до звичайних кнопок, а досвідчений дизайнер має знайти межі тих анімацій. Ще потрібно не забувати про вартість ресурсів браузера, які використовуються для їх відпрацювання.

Також я прихильник того, що дизайнер має уявляти в загальному, як працює розробка. Тобто, мінімальні знання html та CSS зайвими не будуть.

Хоча по суті, з сучасними бібліотеками можливо зробити будь-який ефект, але невідомо, чи браузер буде відображати його з 60 кадрами в секунду.

Варто зазначити, що 60 кадрів в секунду — це стандартна частота оновлення екрана. Так, бувають екрани з більшою частотою (120гц, 144гц, 240гц), проте браузери навчились обмежувати частоту до 60гц, хоча також цей ліміт можна прибрати.

Прихід анімаційних бібліотек у веброзробку

Прихід бібліотек для роботи з анімаціями у розробку дуже спростив життя фронтенд-розробникам. Оскільки важкі анімації затратно писати на чистому JS + CSS, то навіщо себе мучити, якщо можна прочитати документацію бібліотеки та зробити аналогічний код всього одним рядком.

Звичайно бібліотек по анімації існує безліч, для різних завдань і на будь-який смак. Існує також багато типів анімації: анімація при скролі сторінки, заклик до дії, переходи між сторінками або блоками, svg, canvas тощо.

Проте я вибрав таку бібліотеку, яка містить цілу платформу можливостей. Як ви вже здогадались з назві статті, мова буде йти про GSAP.

GSAP — GreenSock animation Platform

З домашньої сторінки GSAP — це JavaScript-анімація професійного рівня для сучасного Web.

Простою мовою, GSAP — це набір інструментів, які дозволяють створювати сценарій анімації. Компанія визначає себе трьома словами — швидкість, надійність і сумісність. Сумісність полягає в тому, що GSAP працює з React, Vue, Angular і ’ванільним’ JavaScript.

Налічується більш як 4 млн сайтів, на яких використовується GSAP, а саме в таких компаніях як Adobe, Amazon, YouTube, Samsung, Intel та багато інших.

У вкладці «Продукти» вказані плагіни для виконання різноманітних завдань, найпопулярніші це:

1. Flip — використовується для роботи зі станами сторінки, коли перемальовується DOM;
2. ScrollTrigger та ScrollSmoother — створюють приголомшливі анімації на основі скролу сторінки;
3. InertialPlugin — вміщує в себе легку роботу з DragAndDrop;
4. TextPlugin та SplitText — налаштування анімацій для текстів.

Підключення бібліотеки

Існує декілька способі отримати GSAP:

• Завантажити файли локально,
• CND,
• NPM,
• GitHub,
• CodePen.

За посиланням ви знайдете детальну інструкцію.

Синтаксис GSAP

У цьому розділі коротко пройдемось по основних методах та розглянемо прості приклади використання GSAP. Детальніше читайте в документації.

Щоб отримати максимальні можливості від GSAP, дуже важливо розуміти, що таке Tweens і Timelines: Tween — це механізм, що відповідає за анімацію, який приймає завдання (об’єкти, які ви хочете анімувати), тривалість та інші властивості.

Розглянемо 3 найпоширеніші методи Tween: gsap.to(), gsap.from(), gsap.fromTo().

1) gsap.to(): першим параметром метод приймає блок, до якого буде підключена анімація, а другим — об’єкт, в якому прописані параметри, які відпрацюють при завантаженні скрипта. Тобто якщо прописано {x: 150}, то елемент при завантаженні переміститься на 150 пікселів по осі X, що і показано на прикладі нижче.

2) gsap.from(): першим параметром метод приймає блок, а другим — об’єкт, в якому прописано, де значення мають починатись і рухатись до поточного стану блоку. Тобто в CSS ми пишемо, де блок має розміщуватись в кінці анімації.

3) gsap.fromTo() — першим параметром метод приймає блок, другим приймає об’єкт, звідки має починатись анімація (аналог gsap.from() ), третім приймає об’єкт, де вона повинна закінчитись (аналог gsap.to() ).

Timeline — це потужний інструмент для послідовності анімації, що діє як контейнер для tween та інших timeline, що робить простим керування ними в цілому та точне керування їхнім часом. Без timeline побудова складних послідовностей була б набагато важчою, оскільки для кожної анімації потрібно було б використовувати затримку.

Приклад з використанням звичайного gsap.to().

gsap.to("#id", {x: 150, duration: 1}); 

gsap.to("#id", {y: 100, duration: 1, delay: 1}); //1 секунда затримки

gsap.to("#id", {borderRadius:’50%’, duration: 1, delay: 2}); // 2 секунди затримки

gsap.to("#id", {x: −150 ,duration: 1, delay: 3}); // 3 сек затримки

А тепер розглянемо, як цей приклад буде виглядати з timeline, затримок писати не потрібно, оскільки анімації йдуть одна за одною.

var tl = gsap.timeline();

tl.to("#id", {x: 100, duration: 1});

tl.to("#id", {y: 100, duration: 1});

tl.to("#id", {borderRadius:’50%’, duration: 1});

tl.to("#id", {x: −150 ,duration: 1});

Найвідоміші аналоги

• Three.js 90.2к зірочок GitHub;
• Anime.js 44.8к зірочок GitHub;
• Scrollreveal.js 21.4к зірочок GitHub;
• Mo.js 17.9к зірочок GitHub.

Також розробники GSAP створили сторінку, на якій можна переглянути, як будуть працювати інші бібліотеки в порівнянні з GSAP з різним навантаженням (показано нижче). Результати, чесно кажучи, мене вразили.

На завершення

Загалом, GSAP — це потужна бібліотека для анімацій, яка дозволяє створювати вражаючі та динамічні анімаційні ефекти з великим переліком налаштувань.

Звичайно, я не зможу показати вам всі можливості GSAP у цій статті, це можуть зробити тільки розробники у своїй чудово написаній документації.

Стаття мала ідею познайомити вас з цікавою бібліотекою, якої не потрібно боятись, а навпаки — почати використовувати у своїх проєктах.

Також за останній рік збільшились вимоги до кандидатів на фронтенд, особливо для джунів. І часто рекрутери додають у розділ «Will be a plus» різні бібліотеки для анімацій. Гадаю, у близькому майбутньому їх знання буде обов’язковим.