Блог о веб-разработке > Animation > GSAP JS — руководство для начинающих

GSAP JS — руководство для начинающих

1. Создадим первую анимацию с помощью TweenLite

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

<script>
	   window.onload = function(){
		    var logo = document.getElementById("logo");
	            TweenLite.to(logo, 1, {left:"632px"});
			}
	</script>

window.onload = function(){

var logo = document.getElementById("logo");

TweenLite.to(logo, 1, {left:"632px"});

}

</script>

See the Pen Basic Tween by GreenSock (@GreenSock) on CodePen.

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

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

2. Добавим Easing

Easing позволит изменять скорость анимации.

TweenLite.to(logo, 3, {left:"440px", ease:Bounce.easeOut});

1	TweenLite.to(logo, 3, {left:"440px", ease:Bounce.easeOut});

See the Pen Easing by GreenSock (@GreenSock) on CodePen.

3. Задержка

Определим задержку перед выполнением анимации.

TweenLite.to(bar, 2, {width:"692px"});
	TweenLite.to(logo, 2, {left:"632px", delay:1});

1 2	TweenLite.to(bar, 2, {width:"692px"}); TweenLite.to(logo, 2, {left:"632px", delay:1});

See the Pen Delay by GreenSock (@GreenSock) on CodePen.

Использование опции delay для одной анимации можеть быть очень удобным. Для создания цепочек анимаций рекомендуем использовать TimeLineMax, TimeLineLite, которые мы рассмотрим позднее.

4. Анимируем несколько css свойств в одном tween

TweenLite.to(logo, 2, {left:"542px",
                       backgroundColor:"black",
                       borderBottomColor:"#90e500",
                       color:"white"});

TweenLite.to(logo, 2, {left:"542px",

backgroundColor:"black",

borderBottomColor:"#90e500",

color:"white"});

See the Pen Animate Multiple Properties by GreenSock (@GreenSock) on CodePen.

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

5. Анимация From

Анимация происходит от заданного значения до текущего.

TweenLite.from(logo, 2, {opacity:0, left:"300px"});

1	TweenLite.from(logo, 2, {opacity:0, left:"300px"});

See the Pen From Tweens by GreenSock (@GreenSock) on CodePen.

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

6. Задание относительных значений

TweenLite.to(logo, 0.5, {left:"+=100px"});

1	TweenLite.to(logo, 0.5, {left:"+=100px"});

Установим конечное значение анимации относительно текущего.

See the Pen Relative Tweens by GreenSock (@GreenSock) on CodePen.

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

7. Анимируем несколько объектов в одном Tween.

TweenLite позволяет использовать массивы объектов.

var red = document.getElementById("red");
	var yellow = document.getElementById("yellow");
	var green = document.getElementById("green");
	TweenLite.to([red, yellow, green], 1, {scale:0.2, opacity:0.3});

var red = document.getElementById("red");

var yellow = document.getElementById("yellow");

var green = document.getElementById("green");

TweenLite.to([red, yellow, green], 1, {scale:0.2, opacity:0.3});

See the Pen Multiple Targets by GreenSock (@GreenSock) on CodePen.

Для упрощения выбора нескольких объектов, вы можете передать их как jQuery объект.

8. Используем jQuery с GSAP JS

<div id="red" class="box"></div>
	<div id="yellow" class="box"></div>
	<div id="green" class="box"></div>
	// Use jQuery to select all elements that use the .box class
	TweenLite.to($(".box"), 1, {scale:0.2, opacity:0.3});

// Use jQuery to select all elements that use the .box class

TweenLite.to($(".box"), 1, {scale:0.2, opacity:0.3});

С помощью jQuery выбираем несколько объектов для анимации.

See the Pen jQuery Selectors by GreenSock (@GreenSock) on CodePen.

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

9. Используем переменные

var tween = TweenLite.to(logo, 1, {left:"632px"});
		restartButton.onclick = function(){
	        //call the tween's restart() method
		tween.restart();
		}

var tween = TweenLite.to(logo, 1, {left:"632px"});

restartButton.onclick = function(){

//call the tween's restart() method

tween.restart();

}

See the Pen Reference a Tween by GreenSock (@GreenSock) on CodePen.

10. TweenMax

TweenMax — это расширенная версия TweenLite. TweenMax включает несколько популярных плагинов: CSSPlugin, BezierPlugin, and RoundPropsPlugin.

11. Повтор анимации несколько раз.

TweenMax позволяет установить свойства repeat, repeatDelay и yoyo. Когда yoyo:true анимация меняет направление на обратное после выполнения.

TweenMax.to(logo, 1, {left:"300px", repeat:1, yoyo:true});

1	TweenMax.to(logo, 1, {left:"300px", repeat:1, yoyo:true});

See the Pen Repeat by GreenSock (@GreenSock) on CodePen.

12. Использование Stagger для нескольких анимаций

Методы staggerTo() и staggerFrom() создают серию анимаций с различной задержкой.

TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {scale:0.2, opacity:0.3}, 0.25);

1	TweenMax.staggerTo([red, yellow, green, blue, pink, purple], 1, {scale:0.2, opacity:0.3}, 0.25);

See the Pen Stagger Multiple Animations by GreenSock (@GreenSock) on CodePen.

Последний параметр в методе называется stagger. Он определяет задержку перед анимацией каждого элемента.

13. TimelineLite

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

Вы получаете полный контроль над скоростью воспроизведения и направлением.

14. TimelineLite — основной синтаксис

var tl = new TimelineLite({paused:true});
	    tl.from(logo, 0.5, {left:"-=60px", ease:Back.easeOut})
	    .from(timelineLite, 0.5, {width:"0px", alpha:0}, "-=0.2")
	    .staggerFrom(tagline, 0.5, {top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2);

var tl = new TimelineLite({paused:true});

tl.from(logo, 0.5, {left:"-=60px", ease:Back.easeOut})

.from(timelineLite, 0.5, {width:"0px", alpha:0}, "-=0.2")

.staggerFrom(tagline, 0.5, {top:"-=30px", rotation:"-40deg", alpha:0, scale:1.8, ease:Back.easeOut}, 0.2);

See the Pen TimelineLite Basic Syntax by GreenSock (@GreenSock) on CodePen.

15. TimelineLite ярлыки

Добавление ярлыков упорщает навигацию по таймлайну.

tl.add("skew") // adds a new label
			  .add(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end
			  .add(getStaggerAnimation(), "stagger") //creates new label and adds animation there
			  .add(getParticlesAnimation(), "particles")

tl.add("skew") // adds a new label

.add(getSkewAnimation()) // method returns a TimelineLite instance that gets nested at the end

.add(getStaggerAnimation(), "stagger") //creates new label and adds animation there

.add(getParticlesAnimation(), "particles")

See the Pen TimelineLite Labels by GreenSock (@GreenSock) on CodePen.

16. TimelineMax в действии

var tl = new TimelineMax({onUpdate:updateUI, repeat:2, repeatDelay:1, yoyo:true});    
			  tl.from(logo, 0.5, {left:'-=60px', ease:Back.easeOut})
			  .staggerFrom(txt, 0.1, {alpha:0}, 0.02, "textEffect")
			  .staggerFrom(txt, 0.8, {rotationY:"-270deg", top:"100px", transformOrigin: "50% 50% -80", ease:Back.easeOut}, 0.02, "textEffect")
			  .staggerTo(txt, 0.6, {rotationX:"+=360deg", transformOrigin:"50% 50% 10", color:"#90e500"}, 0.02);