GSAP JS - посібник для початківців

1. Створимо першу анімацію за допомогою TweenLite

Додамо простий скрипт у html документ

Логотип переміщається на 632 пікселя праворуч протягом 1 секунди.

Синтаксис: TweenLite.to([об'єкт],[тривалість анімації в секундах],[змінюване значення])

Easing дозволить змінювати швидкість анімації.

Натисніть на Pen Easing by GreenSock (@GreenSock) на CodePen.

Визначимо затримку перед виконанням анімації.

Натисніть на Pen Delay by GreenSock (@GreenSock) на CodePen.

Важливо видалити всі дефіси в іменах css властивостей.

Анімація походить від заданого значення до поточного.

У попередніх прикладах ми використовували TweenLite.to(), анімація походила від заданих значень до зазначених у функції.

Встановимо кінцеве значення анімації щодо поточного.

Додавання += або -= префіксів GSAP говорить, що необхідно збільшити або зменшити параметр на вказану величину.

TweenLite дозволяє використовувати масив об'єктів.

Для спрощення вибору кількох об'єктів ви можете передати їх як jQuery об'єкт.

За допомогою jQuery вибираємо декілька об'єктів для анімації.

GSAP JS не залежить від JQuery, але вони чудово працюють разом. JQuery зручно використовувати як селектор об'єктів для передачі в GSAP для анімації.

TweenMax – це розширена версія TweenLite. TweenMax включає декілька популярнихплагінів: CSSPlugin, BezierPlugin, і RoundPropsPlugin.

TweenMax дозволяє встановити властивості repeat, repeatDelay та yoyo. Коли yoyo:true анімація змінює напрямок на зворотний після виконання.

Перейти до Pen Repeat by GreenSock (@GreenSock) на CodePen.

Методи staggerTo() та staggerFrom() створюють серію анімацій з різною затримкою.

Останній параметр у методі називається stagger. Він визначає затримку перед анімацією кожного елемента.

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

Ви отримуєте повний контроль над швидкістю відтворення та напрямком.