GSAP

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

GSAP 구성

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

GSAP 로딩

GSAP 사용하기VIEW

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>

	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>		
		
	<!-- CDN CSSPlugin, EasePack, TweenLite -->
	<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("target", duration, vars);

1. 버튼을 클릭하면 오른쪽으로 이동하기 START
box
box
box
//1. 버튼을 클릭하면 원을 오른쪽으로 이동시켜주세요!!!!
$(".btn1").on("click",function(){
	//$(".box1_1, .box1_2, .box1_3").animate({ left:"90%" },1000);
	//TweenMax
	TweenMax.to([".box1_1, .box1_2, .box1_3"],1,{left:"90%"});
});
2. 버튼을 클릭하면 오른쪽으로 100px 이동하기 START
box
//2. 버튼을 클릭할 때마다 원을 오른쪽으로 100픽셀 이동시켜주세요!!
$(".btn2").on("click",function(){
	//$(".box2_1").animate({ left : "+=100px"},"slow","easeOutQuint");
	//TweenMax
	TweenMax.to(".box2_1", 1, {left:"+=100px"});
});
3. 버튼을 클릭하면 백그라운드 이미지 색 변경하면서 이동하기 START
box
//3. 버튼을 클릭하면 백그라운드 이미지 색 변경하면서 이동하기
$(".btn3").on("click",function(){
    //TweenMax
    TweenMax.to(".box3_1", 2, {left:"90%",backgroundImage:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
});
4. 버튼을 클릭하면 두배로 확대하면서 이동하기 START
box
//4. 버튼을 클릭하면 확대하면서 이동하기
$(".btn4").on("click",function(){
    //TweenMax
    TweenMax.to(".box4_1", 1, {left:"90%",scale:"3"});
});
5. 버튼을 클릭하면 border-radius 변경하면서 이동하기 START
box
//5. 버튼을 클릭하면 border-radius 변경하면서 이동하기
$(".btn5").on("click",function(){
    //TweenMax
    TweenMax.to(".box5_1", 1, {left:"90%", borderRadius:"0%"});
});
6. 버튼을 클릭하면 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:"300deg"});
    TweenMax.to(".box6_3", 1, {left:"90%", skewX:"700deg"});
});
7. 버튼을 클릭하면 rotation 변경하면서 이동하기 START
box
box
box
box
box
//7. 버튼을 클릭하면 rotation(회전) 변경하면서 이동하기
$(".btn7").on("click",function(){
    //TweenMax
    TweenMax.to(".box7_1", 1, {left:"90%", rotation:"30deg"});
    TweenMax.to(".box7_2", 1, {left:"90%", rotation:"30rad"});
    TweenMax.to(".box7_3", 1, {left:"90%", rotation:"30", skewX:"360deg"});
    TweenMax.to(".box7_4", 1,{left:"90%", rotationY: "100deg", skewX: "330deg"});
    TweenMax.to(".box7_5", 1,{left:"90%", rotationZ: "20rad", skewX: "330deg"});
});
8. 버튼을 클릭하면 rotation 변경하면서 이동하기 START
box
box
box
//8. 버튼을 클릭하면 delay효과로 이동하기
$(".btn8").on("click",function(){
    //TweenMax
    TweenMax.to(".box8_1", 1,{left:"90%", delay:0.1, rotation: "30deg"});
    TweenMax.to(".box8_2", 2,{left:"90%", delay:0.2, rotation: "720deg"});
    TweenMax.to(".box8_3", 3,{left:"90%", delay:0.3, rotation: "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
box
$(".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
//1. 버튼을 클릭하면 움직임 효과 보기
$(".btn51").on("click",function(){
    //TweenMax
    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:Bounce.easeOut});
    TweenMax.to(".box51_8", 2,{left:"90%", ease:SlowMo.easeOut});
});

Callbacks

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

  • onComlpete : 애니메이션이 완료되었을 때
  • onStart : 애니메이션이 시작할 때
  • onUpdate : 애니메이션이 업데이트 될 때 마다
  • onRepeat : 애니메이션이 반복될 때마다
  • onReverseComplete : 애니메이션이 리버스 되고 완료되었을 때
1. 버튼을 클릭하면 움직임 효과보기 Start
box
box
box
$(".btn61").on("click",function(){
    $(".box61_1").animate({left: "90%"},1000,function(){
        alert("제이쿼리 콜백함수 도착");
    });

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

    function tweenComplete(){
        alert("TweenMax 콜백함수 도착");
    }
    function tweenStart(){
        alert("TweenMax 콜백함수 시작");
    }
});
2. 버튼을 클릭하면 움직임 효과보기 Start
box1
box2
var outout = document.querySelector("#outout");  //자바스크립트
$(".btn62").on("click",function(){
    TweenMax.to(".box62_1",2,{
       left:"90%",
        onStart: showMessage,
        onStartParams: ["box1 지금 움직일꺼야!"],
        onComplete: showMessage,
        onCompleteParams: ["box1 다 움직였어"],
        delay: 0.1
    });
    TweenMax.to(".box62_2",2,{
       left:"90%",
        onStart: showMessage,
        onStartParams: ["box2 지금 움직일꺼야!"],
        onComplete: showMessage,
        onCompleteParams: ["box2 다 움직였어"],
        delay: 1
    });
});

function showMessage(message) {
    outout.innerHTML += message + "
";
//            outout.text()  : 제이쿼리방식
}

Controlling

1. Controlling START Pause Resume Reverse Seek Scale Scale(2) Kill Restart
box
//controll
var tween = TweenMax.to(".box71_1",10,{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, {left: "90%"});
    tl.to(".box81", 1, {height: 300, ease:Elastic.easeOut});
    tl.to(".box81", 1, {opacity: 0.5});
    tl.to(".box81", 1, {height: 60, ease:Elastic.easeOut});
    tl.to(".box81", 1, {opacity:1, left: "0"});
});
2. Timeline START
box
//Timeline 2
$(".btn82").on("click",function(){
    var tl = new TimelineLite();
    tl.to(".box82", 1, {left: "80%",scale: "0.5",rotation:"100deg" });
    tl.to(".box82", 2, {left: "0%",opacity: 0.5, skewY: "720deg", rotation:"300deg",scale: "1" });
    tl.to(".box82", 1, {left: "90%", rotation:"1000deg" , borderRadius: "0%", 
        scale: "0.5", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
    tl.to(".box82", 1, {rotation:"-2000deg"});
    tl.to(".box82", 1, {opacity:1, left: "0", scale: "1", rotation:"-0deg"});
});
3. Timeline Repeat START
box
box
box
box
//Timeline Repeat
$(".btn83").on("click",function(){
    var tl = new TimelineMax({repeat:3, repeatDelay:1});

tl.to(".box83_1", 1, {left:"90%"})
  .to(".box83_2", 1,{left:"90%", scale:0.2}, "+=1")
  .addLabel("gray")
  .to(".box83_3", 1,{left:"90%", scale:1.5}, "gray")
  .to(".box83_4", 1,{left:"90%", rotation:"360deg"}, "gray")    
});
4. Timeline 이용하여 애니메이션 컨트롤 하기 Play Pause Resume Reverse Restart
box
box
box
box
//Timeline Controll
var play = document.querySelector(".btn84_1");
var pause = document.querySelector(".btn84_2");
var resume = document.querySelector(".btn84_3");
var reverse = document.querySelector(".btn84_4");
var restart = document.querySelector(".btn84_5");

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

tl2.to(".box84_1", 1, {left: "90%"})
   .to(".box84_2", 1, {left:"90%", scale:0.2}, "+=1")
   .to(".box84_3", 1, {left:"90%", scale:2}, "black")
   .to(".box84_4", 1, {left:"90%", rotation: "360deg"}, "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(); }
5.TimeScale() 이용하여 애니메이션 컨트롤 하기 restart timeScale(0.2) timeScale(1) timeScale(4)
box
box
box
box
//Timeline timescale
var tplay = document.querySelector(".btn85_1");
var timeScale2 = document.querySelector(".btn85_2");
var timeScale3 = document.querySelector(".btn85_3");
var timeScale4 = document.querySelector(".btn85_4");

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

tl3.to(".box85_1", 1, {left: "90%"})
   .to(".box85_2", 1, {left:"90%", scale:0.2})
   .to(".box85_3", 1, {left:"90%", scale:2}, "black")
   .to(".box85_4", 1, {left:"90%", rotation: "360deg"}, "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. Repeat 반복하기 애니메이션 START
box
box
box
box
//Repeat
$(".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, toto:true, ease:Power4.easeOut});
})

Stagger

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

SAMPLE

1. Basic TweenMax Animation

See the Pen Basic TweenMax Animation by jeongahlee (@jeongahlee) on CodePen.



2. Button TweenMax Animation

See the Pen Button TweenMax Animation by jeongahlee (@jeongahlee) on CodePen.



3. Button TweenMax Animation

See the Pen Button TweenMax Animation2 by jeongahlee (@jeongahlee) on CodePen.

4. Loading TweenMax Animation 1

See the Pen Loading Animation TweenMax by jeongahlee (@jeongahlee) on CodePen.

5. Loading TweenMax Animation 2

See the Pen Loading Animation TweenMax 2 by jeongahlee (@jeongahlee) on CodePen.

6. Loading TweenMax Animation 3

See the Pen Loading Animation TweenMax 3 by jeongahlee (@jeongahlee) on CodePen.

7. Loading TweenMax Animation 4

See the Pen Loading Animation TweenMax 4 by jeongahlee (@jeongahlee) on CodePen.

8. Rocket TweenMax Animation 4

See the Pen Roket TweenMax Animation by jeongahlee (@jeongahlee) on CodePen.