GSAP

웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다. 기존 CSS Animation이나 자바스크립트 Animation보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리입니다.

GSAP 구성

  • Tweenlite : GSAP의 애니메이션 객체와 그 속성을 조절하는 코어 엔진입니다. 이 파일은 필수 객체만 포함하고 있는 경량화 파일이지만, 기본적인 애니메이션을 모두 처리 할 수 있으며, 다른 특수하나 기능을 추가로 로드해서 사용할 수도 있습니다.
  • TweenMax : Tweenlite가 반드시 필요한 기능만 묶은 경량화 코어 파일이라면, TweenMax는 TweenLite 기능은 물론이고, 애니메이션 작업에 필요한 대부분의 기능을 커버하는 다양한 플러그인도 다수 포함하고 있는 풀버전 파일입니다. 유료 기능은 포함하고 있지 않습니다.
  • TimelineLite : GSAP의 핵심 기능이라고 할 수 있으며, CSS가 오직 지연시간만을 이용해서 각 애니메이션의 타이밍을 결정한다고 하면, GSAP는 타임라인에 기초한 시퀀싱, 즉 순차재생이 가능하기 때문에 여러 애니메이션을 유기적으로 연결하거나 수정하기가 편리합니다.
  • TimeLineMax : TimelineLite의 확장된 파일이며, repeat, repeatDelay, yoyo 등의 부가기능이 포함되어 있습니다.

GSAP 로딩

GSAP 사용하기
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>GSAP</title>

	<!-- CDN TweenMax -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

	<!-- CDN TweenLite, CSSPluginm, EasePack -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/plugins/CSSPlugin.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/easing/EasePack.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.5/TweenLite.min.js"></script>

	<!-- local -->
	<script src="js/TimelineLite.min.js"></script>
	<script src="js/TimelineMax.min.js"></script>
	<script src="js/TweenLite.min.js"></script>
	<script src="js/TweenMax.min.js"></script>

	<!-- jquery + gsap -->
	<script src="js/jquery.gsap.min.js"></script>	
</head>
<body>
	
</body>
</html>

TweenMax.to

TweenMax.to("target", duration, vars);
var 변수명 = 값;

버튼을 클릭하면 오른쪽으로 이동하기 START

box
box
box
//1.버튼을 클릭하면 원을 오른쪽으로 이동시켜주세요!
$(".btn1").on("click",function(){
	// $(".box1_1, .box1_2, .box1_3").animate({ left:"90%" },1000);
	TweenMax.to([".box1_1,.box1_2,.box1_3"],1,{left:"90%"});
});

버튼을 클릭하면 오른쪽으로 100px씩 이동하기 START

box
box
box
// 2. 버튼을 클릭할 때마다 원을 오른쪽으로 100px씩 이동시켜주세요!
$(".btn2").on("click",function(){
	// $(".box2_1, .box2_2, .box2_3").animate({ left:"+=100px" },1000);
	TweenMax.to(".box2_2" ,1,{left:"+=100px"});
});

버튼을 클릭하면 백그라운드 이미지 색 변경하면서 이동하기 START

box
box
box
// 3. 버튼을 클릭하면 백그라운드 이미지 색 변경하면서 이동하기!
$(".btn3").on("click",function(){
	//TweenMax
	TweenMax.to(".box3_2" ,2,{left:"90%", backgroundImage:"linear-gradient(to top, #30cfd0 0%, #330867 100%)"});
});

버튼을 클릭하면 확대하면서 이동하기 START

box
// 4. 버튼을 클릭하면 두배로 확대되면서 이동하기
$(".btn4").on("click",function(){
	//TweenMax
	TweenMax.to(".box4_1" ,1,{left:"90%", scale:"3"});
});

버튼을 클릭하면 border-radius 변경하면서 이동하기 START

box
// 5. 버튼을 클릭하면 border-radius 변경하면서 이동하기
$(".btn5").on("click",function(){
	//TweenMax
	TweenMax.to(".box5_1" ,1,{left:"90%", borderRadius:"0%"});
});

버튼을 클릭하면 skew변경하면서 이동하기 START

box
box
box
// 6. 버튼을 클릭하면 skew 변경하면서 이동하기
$(".btn6").on("click",function(){
	//TweenMax
	TweenMax.to(".box6_1" ,1,{left:"90%", skewX:"30deg"});
	TweenMax.to(".box6_2" ,1,{left:"90%", skewX:"330deg"});
	TweenMax.to(".box6_3" ,1,{left:"90%", skewX:"630deg"});
});

버튼을 클릭하면 rotation 변경하면서 이동하기 START

box
box
box
box
box
// 7. 버튼을 클릭하면 rotation 변경하면서 이동하기
$(".btn7").on("click",function(){
	//TweenMax
	TweenMax.to(".box7_1", 2, {left:"90%", rotation:"120deg"});
	TweenMax.to(".box7_2", 2, {left:"90%", rotationX:"120deg"});
	TweenMax.to(".box7_3", 2, {left:"90%", rotationY:"120deg"});
	TweenMax.to(".box7_4", 2, {left:"90%", rotationZ:"8rad", skewX:"360deg"});
	TweenMax.to(".box7_5", 2, {left:"90%", rotation:"630", skewX:"360deg"});
});

버튼을 클릭하면 Delay 변경하면서 이동하기 START

box
box
box
// 8. 버튼을 클릭하면 Delay효과로 이동하기
$(".btn8").on("click",function(){
	//TweenMax
	TweenMax.to(".box8_1", 1, {left:"90%", delay:0.1, rotationY:"720deg"});
	TweenMax.to(".box8_2", 1, {left:"90%", delay:0.2, rotationY:"720deg"});
	TweenMax.to(".box8_3", 1, {left:"90%", delay:0.3, rotationY:"720deg"});
});

2D and 3D Transforms

GSAP CSS
x:100 transform: translateX(100px)
y:100 transform: translateY(100px)
rotation:360 transform: rotate(360deg)
rotationX:360 transform: rotateX(360deg)
rotationY:360 transform: rotateY(360deg)
slewY:45 transform: skewY(45deg)
xPercent: 50 transform: translateX(50%)
yPercent: 50 transform: translateY(50%)

TweenMax.from

1. 버튼을 클릭하면 반대로 이동하기 START

box
box
box
// 1.버튼을 클릭하면 반대로 이동하기
$(".btn41").on("click",function(){
	TweenMax.from(".box41_1",2, {left:"90%"});
	TweenMax.from(".box41_2",2, {left:"90%", opacity: 0});
	TweenMax.from(".box41_3",2, {left:"90%", opacity: 0, scale: 0.5});
	TweenMax.from(".box41_4",2, {left:"90%", opacity: 0, scale: 0.5, rotationX:"720deg"});
});

Easing

1. 버튼을 클릭하면 움직임 효과보기 START

box
box
box
box
box
box
box
box
$(".btn51").on("click",function(){
	TweenMax.to(".box51_1",2, {left:"90%"});
	TweenMax.to(".box51_2",2, {left:"90%", ease:Power0.easeOut});
	TweenMax.to(".box51_3",2, {left:"90%", ease:Power1.easeOut});
	TweenMax.to(".box51_4",2, {left:"90%", ease:Power2.easeOut});
	TweenMax.to(".box51_5",2, {left:"90%", ease:Power3.easeOut});
	TweenMax.to(".box51_6",2, {left:"90%", ease:Power4.easeOut});
	TweenMax.to(".box51_7",2, {left:"90%", ease:Power5.easeOut});
	TweenMax.to(".box51_8",2, {left:"90%", ease:Power6.easeOut});
});

Callbacks

콜백함수는 특정 애니메이션 관련 이벤트가 발행한 후 또 다른 함수를 호풀합니다.

  • onComplete : 애니메이션이 완료되었을 때
  • onStart : 애니메이션이 시작할 때
  • onUpdate : 애니메이션이 업데이트 될 때 마다
  • onRepeat : 애니메이션이 반복 될 때마다
  • onReverseComplete : 애니메이션이 반대(Reverse)로 되고 완료되었을 때

1. 버튼을 클릭하면 콜백함수 사용하기 START

box
box
box
//1. 버튼을 클릭하면 콜백함수 사용하기
$(".btn61").on("click",function(){
	$(".box61_1").animate({left:"90%"},600,function(){
		alert("제이쿼리 콜백함수 도착")
	});

	TweenMax.to(".box61_2", 1, {left:"90%", onComplete:com});
	TweenMax.to(".box61_3", 1, {left:"90%", onStart:tweenStart});

	function twwemComplete(){
		alert("TweenMax 콜백함수 도착");
	}
	function tweenStart(){
		alert("TweenMax 콜백함수 시작");
	}
});

2. 버튼을 클릭하면 콜백함수 사용하기 START

box
box
// var outout = $("#outout");
var outout = document.querySelector("#outout");

$(".btn62").on("click",function(){
	TweenMax.to(".box62_1",2, {
		left:"90%",
		onStart: showMessage,
		onStartParams: ["이 박스는 지금 움직일꺼야!"],
		onComplete: showMessage,
		onCompleteParams: ["이 박스는 다 움직였어"],
		delay: 1
	});
});

$(".btn62").on("click",function(){
	TweenMax.to(".box62_2",2, {
		left:"90%",
		onStart: showMessage,
		onStartParams: ["이 박스는 지금 움직일꺼야!"],
		onComplete: showMessage,
		onCompleteParams: ["이 박스는 다 움직였어"],
		delay: 5
	});
});

function showMessage(message) {
	outout.innerHTML += message + "
";
}

Controlling

1.Controlling START Pause Resume Reverse Seek Scale Scale(2) Kill Restart

box
// controlling
var tween = TweenMax.to(".box71_1", 15,{left:"90%", borderRadius:"0%", rotation:"720deg"});
$(".btn71_1").click(function(){tween.play()});
$(".btn71_2").click(function(){tween.pause()});
$(".btn71_3").click(function(){tween.resume()});
$(".btn71_4").click(function(){tween.reverse()});
$(".btn71_5").click(function(){tween.seek(0.5)});
$(".btn71_6").click(function(){tween.timeScale(0.5)});
$(".btn71_7").click(function(){tween.timeScale(2)});
$(".btn71_8").click(function(){tween.kill()});
$(".btn71_9").click(function(){tween.restart()});

Timeline

1.Timeline 이용하여 애니메이션 만들기 START

box
// timeline
$(".btn81").on("click",function(){
	var tl = new TimelineLite();
	tl.to(".box81_1", 1, {left:"90%"});
	tl.to(".box81_1", 1, {height: 300, ease:Elastic.easeOut});
	tl.to(".box81_1", 1, {opacity: 0.5});
	tl.to(".box81_1", 1, {height: 60, ease:Elastic.easeOut});
	tl.to(".box81_1", 1, {opacity:1, left:"0"});
});

2.Timeline 이용하여 반복 애니메이션 만들기 START

box
box
box
box
// thimeline Repeat
$(".btn81").on("click",function(){
	var tl = new TimelineMax({repeat:3, repeatDelay:1});

	tl.to(".box82_1",1,{left:"90%"})
		.to(".box82_2",1,{left:"90%", scale:0.2}, "+=1")
		.addLabel("gray")
		.to(".box82_3",1,{left:"90%", scale:2}, "gray")
		.to(".box82_4",1,{left:"90%", rotation:360}, "gray");
});

3. Timeline을 이용해서 애니메이션 컨트롤하기 Play Pluse Resume Reverse Restart

box
box
box
box
// timeline Control
var play = document.querySelector(".btn83_1");
var pause = document.querySelector(".btn83_2");
var resume = document.querySelector(".btn83_3");
var reverse = document.querySelector(".btn83_4");
var restart = document.querySelector(".btn83_5");

var tl2 = new TimelineMax({pause:true});

tl2.to(".box83_1",1,{left:"90%"})
	.to(".box83_2",1,{left:"90%", scale:0.2}, "+=1")
	.to(".box83_3",1,{left:"90%", scale:2}, "black")
	.to(".box83_4",1,{left:"90%", rotation:360}, "black");

play.onclick = function(){tl2.play();}
pause.onclick = function(){tl2.pause();}
resume.onclick = function(){tl2.resume();}
reverse.onclick = function(){tl2.reverse();}
restart.onclick = function(){tl2.restart();}

4.TimeScale() 이용하여 애니메이션 컨트롤 하기 restart timeScale(0.2) timeScale(1) timeScale(4)

box
box
box
box
//timeline timescale
var tplay = document.querySelector(".btn84_1");
var timeScale2 = document.querySelector(".btn84_2");
var timeScale3 = document.querySelector(".btn84_3");
var timeScale4 = document.querySelector(".btn84_4");

var tl3 = new TimelineMax({repeat: 6, yoyo:true, pause:true});

tl3.to(".box84_1",1,{left:"90%"})
   .to(".box84_2",1,{left:"90%", scale:0.2})
   .to(".box84_3",1,{left:"90%", scale:2}, "black")
   .to(".box84_4",1,{left:"90%", rotation:360}, "black");

tplay.onclick = function(){tl3.restart();};
timeScale2.onclick = function(){tl3.timeScale(0.2);};
timeScale3.onclick = function(){tl3.timeScale(1);};
timeScale4.onclick = function(){tl3.timeScale(4);};

Repeat

1. 반복하기 애니메이션 START

box
box
box
box
// Repeat 1.반복하는 애니메이션
$(".btn91").on("click",function(){
	TweenMax.to(".box91_1",2,{left:"90%", repeat:1, ease:Power4.easeOut});
	TweenMax.to(".box91_2",2,{left:"90%", repeat:1, repeatDelay:1, ease:Power4.easeOut});
	TweenMax.to(".box91_3",2,{left:"90%", repeat:1, yoyo:true, ease:Power4.easeOut});
	TweenMax.to(".box91_4",2,{left:"90%", repeat:-1, yoyo:true, ease:Power4.easeOut});
});

Stagger

1. 연속적으로 반복하기 애니메이션 START

box
box
box
box
// Stagger 1.연속적으로 반복하는 애니메이션
$(".btn101").on("click",function(){
	TweenMax.staggerTo([".box101_1", ".box101_2", ".box101_3", ".box101_4"],1,{left:"90%", scale:0.2, opacity:0.5, ease:Power3.easeOut},0.25);
});

Sample

Sample1

See the Pen Basic TweenMax Animtion by Yang (@yangareum) on CodePen.

Sample2

See the Pen Button TweenMax Animtion by Yang (@yangareum) on CodePen.

Sample3

See the Pen Button TweenMax Animtion2 by Yang (@yangareum) on CodePen.

Sample4

See the Pen Loding Animation TweenMax by Yang (@yangareum) on CodePen.

Sample5 Roket Animation

See the Pen Roket Animation by Yang (@yangareum) on CodePen.