GSAP JS - ръководство за начинаещи

1. Създайте първата анимация с TweenLite

Добавете прост скрипт към html документа

Логото се премества с 632 пиксела надясно за 1 секунда.

Синтаксис: TweenLite.to([обект],[продължителност на анимацията в секунди],[променлива стойност])

Улесняването ще ви позволи да промените скоростта на анимацията.

Вижте Pen Easing от GreenSock (@GreenSock) на CodePen.

Нека да дефинираме забавяне преди изпълнение на анимацията.

Вижте забавянето на писалката от 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, анимацията обръща посоката след изпълнение.

Вижте повторението на писалката от GreenSock (@GreenSock) на CodePen.

Методите staggerTo() и staggerFrom() създават поредица от анимации с различни забавяния.

Последният параметър в метода се нарича stagger. Той определя забавяне преди анимацията на всеки елемент.

TimelineLite може да съхранява хиляди анимации и група от анимации може да се управлява толкова лесно, колкото една.

Имате пълен контрол върху скоростта и посоката на възпроизвеждане.