Логотип GSAP
GreenSock Animation Platform, або GSAP, — це потужний набір інструментів для JavaScript, який перетворює розробників на супергероїв анімацій. Створюйте високопродуктивні анімації, що працюють на всіх основних браузерах, і можуть анімувати SVG, canvas, CSS, react, WebGL, кольори, рядки та будь-яке інше, з чим може працювати JavaScript.
GSAP — ідеальний вибір для складних анімацій та взаємодій.
Налаштування GSAP
Ви можете почати використовувати GSAP, або встановивши його пакет через NPM, або підключивши його через CDN.
NPM
Встановіть GSAP за допомогою npm для ефективного управління залежностями, що ідеально підходить для більших проєктів, що використовують інструменти на зразок Webpack.
npm install gsap
CDN (Content Delivery Network)
Легко підключіть GSAP через посилання на CDN у вашому HTML файлі.
Ви задаєте цілі, тривалість і властивості, а GSAP обчислює та застосовує значення під час руху плейхеда.
Основні методи для створення Tween:
gsap.to(): Анімує від поточного стану елемента до вказаних значень.
gsap.from(): Анімує від вказаних значень до поточного стану елемента.
gsap.fromTo(): Визначає як початкові, так і кінцеві значення для анімації.
gsap.set(): Негайно встановлює властивості без анімації (Tween з нульовою тривалістю).
Ці методи дають гнучкість для створення різноманітних анімаційних ефектів.
Ось приклад того, як використовувати метод tween у вашому коді:
// Зникнення і масштабування елементів з класом "circle" за 2 секунди.
gsap.to(".circle", { opacity: 0, scale: 0.5, duration: 2 });
Тепер давайте розберемося, що таке Timeline?
Timeline (Таймлайн) — це контейнер для Tweens, який дозволяє точно управляти послідовністю анімацій і надає зручні методи управління, такі як play(), pause() і reverse().
Ось метод для створення Timeline:
gsap.timeline()
Давайте розглянемо, як працювати з Timeline для послідовності кількох анімацій.
1- Створіть екземпляр Timeline:
var tl = gsap.timeline();
2- Додайте кілька tweens до таймлайна, використовуючи to(), from() або fromTo().
Ось приклад послідовності:
tl.to(".circle", { duration: 1, y: 100, scale: 1.5 }) // Переміщуємо і масштабуємо круг
.to(".box", { duration: 2, x: 200, rotation: 45 }, "+=0.5") // Крутимо і переміщаємо коробку, починається через 0.5 с після попереднього tween
.from(".triangle", { duration: 1, opacity: 0, y: -50 }); // Зникає і опускається трикутник
- to(): Анімує ціль до заданих властивостей.
- from(): Анімує ціль, починаючи з заданих властивостей до поточного стану.
- +=0.5: Затримує наступну анімацію на 0.5 секунди.
Таймлайн забезпечує виконання всіх анімацій у скоординованій послідовності.
Які властивості можна анімувати?
GSAP дозволяє анімувати майже все: від CSS-властивостей, таких як ширина, висота, колір і розмір шрифту, до користувацьких властивостей об'єктів, CSS змінних і навіть складних рядків.
Її універсальність не має заздалегідь визначених обмежень!
GSAP Easing
Згідно з офіційною документацією GSAP, easing (плавність) — це ключова техніка для зміни часу ваших Tweens. Вона визначає, як об'єкт переходить між позиціями на різних етапах анімації, контролюючи швидкість зміни та визначаючи стиль руху.
GSAP пропонує широкий спектр типів easing (плавності) та опцій, даючи вам точний контроль над поведінкою вашої анімації.
Для Easing можна використовувати:
- In(): Починається повільно і прискорюється.
- Out(): Починається швидко і уповільнюється.
- InOut(): Комбінація обох варіантів, починається повільно, прискорюється в середині, а потім знову сповільнюється.
- OutIn(): Починається швидко, уповільнюється, а потім прискорюється в зворотному напрямку.
GSAP Plugins
Плагіни покращують основну функціональність GSAP, зберігаючи його легким, одночасно пропонуючи додаткові можливості, які можна додавати за потребою.
Плагіни можна встановлювати різними методами, включаючи тег