GSAP

The GreenSock Animation Platform(GSAP)는 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 이 GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation보다 더 정밀한 컨트롤을 할 수 있습니다.

기존의 CSS 애니메이션과 JavaScript 애니메이션보다 사용성이 편하고, 탁월한 퍼포먼스가 돋보이는 애니메이션 전용 라이브러리입니다.

GSAP 구성

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

GSAP 사용하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GSAP</title>

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

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

    <!--CDN jquery + GSAP-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/jquery.gsap.min.js"></script>
    
    <!--CDN plugins-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
</head>
<body>
    
</body>
</html>

TweenMax.to jquery Click GSAP Click Reset

box

TweenMax.to

//reset
$("#reset1").click(function(){
    $(".circle1").animate({left: "0%"}, 0);
});

//jquery
$("#btn1-1").click(function(){
    $(".circle1").animate({left: "80%"}, 1000);
});

//jquery + GSAP
    $("#btn1-2").click(function(){
        TweenMax.to(".circle1",1, {left: "80%"});
    });

//javascript
const btn1_2 = document.getElementById("btn1-2");

btn1_2.addEventListener("click", moveStart1);

function moveStart1(){
    TweenMax.to(".circle1",1,{left:"80%"});
}

TweenMax.to jquery Click GSAP Click Reset

box
box
box

여러개 움직이기

//reset
$("#reset3").click(function(){
    $(".circle3-1, .circle3-2, .circle3-3").animate({left: "0%"}, 0);
});

//jquery
$("#btn3-1").click(function(){
    $(".circle3-1, .circle3-2, .circle3-3").animate({left: "80%"},1000);
});

//  //jquery + GSAP
//  $("#btn3-2").click(function(){
//     TweenMax.to([".circle3-1, .circle3-2, .circle3-3"],1, {left: "80%"});
// });

//javascript
const btn3_2 = document.getElementById("btn3-2");
btn3_2.addEventListener("click", moveStart3);

function moveStart3(){
    TweenMax.to([".circle3-1, .circle3-2, .circle3-3"],1, {left: "80%"});
}

TweenMax.to jquery Click GSAP Click Reset

box

100px씩 움직이기

 //reset
$("#reset4").click(function(){
    $(".circle4").animate({left: "0%"}, 0);
});

//jquery
$("#btn4-1").click(function(){
    $(".circle4").animate({left: "+=100"},1000);
});

//  //jquery + GSAP
//  $("#btn4-2").click(function(){
//     TweenMax.to([".circle4"],1, {left: "+=100"});
// });

//javascript
const btn4_2 = document.getElementById("btn4-2");
btn4_2.addEventListener("click", moveStart4);

function moveStart4(){
    TweenMax.to(".circle4",1, {left: "+=100"});
}

TweenMax.from jquery Click GSAP Click Reset

box

반대로 움직이기

//sample5_______
//reset
$("#reset5").click(function(){
    $(".circle5").animate({left: "0%"}, 0);
});

//jquery
$("#btn5-1").click(function(){
    alert('제이쿼리에는 이런 기능이 없음');
});

//  //jquery + GSAP
    $("#btn5-2").click(function(){
    TweenMax.from(".circle5",1, {left: "80%"});
});

Transform - scale jquery Click GSAP Click Reset

box
//sample6_______
//reset
$("#reset6").click(function(){
    $(".circle6").animate({left: "0%"}, 0);
    $(".circle6").css({transform : "scale(1)"});
});

//jquery
$("#btn6-1").click(function(){
    $(".circle6").animate({left : "80%"},1000);
    $(".circle6").css({transform : "scale(3)"});
});

//  //jquery + GSAP
    $("#btn6-2").click(function(){
    TweenMax.to(".circle6",1, {left: "80%", scale:"2"});
});

Transform - radius jquery Click GSAP Click Reset

box
//reset
$("#reset7").click(function(){
    $(".circle7").animate({left: "0%", borderRadius: "50%"}, 0);
});

//jquery
$("#btn7-1").click(function(){
    $(".circle7").animate({left : "80%", borderRadius: "0%"},1000);
});

//  //jquery + GSAP
    $("#btn7-2").click(function(){
    TweenMax.to(".circle7",1, {left: "80%", borderRadius:"0%"});
});

Transform - skewX jquery Click GSAP Click Reset

box
box
box
//reset
$("#reset8").click(function(){
    $(".circle8-1, .circle8-2, .circle8-3").animate({left: "0%"}, 0).css({transform : "skewX(0deg)"});
    TweenMax.to(".circle8-1",0, {left: "0", skewX :"0"});
    TweenMax.to(".circle8-2",0, {left: "0", skewX:"0"});
    TweenMax.to(".circle8-3",0, {left: "0", skewX:"0"});
});

//jquery
$("#btn8-1").click(function(){
    $(".circle8-1").animate({left : "80%"},1000).css({transform : "skewX(30deg)"});
    $(".circle8-2").animate({left : "80%"},1000).css({transform : "skewX(330deg)"});
    $(".circle8-3").animate({left : "80%"},1000).css({transform : "skewX(660deg)"});
});

//  //jquery + GSAP
    $("#btn8-2").click(function(){
    TweenMax.to(".circle8-1",2, {left: "80%", skewX :"30deg"});
    TweenMax.to(".circle8-2",2, {left: "80%", skewX:"330deg"});
    TweenMax.to(".circle8-3",2, {left: "80%", skewX:"660deg"});
});

Transform - Delay jquery Click GSAP Click Reset

box
box
box
//reset
$("#reset9").click(function(){
    $(".circle9-1").animate({left: "0%"}, 0);
    $(".circle9-2").animate({left: "0%"}, 0);
    $(".circle9-3").animate({left: "0%"}, 0);
    TweenMax.to(".circle9-1",0, {left: "0", rotationY : "0deg"});
    TweenMax.to(".circle9-2",0, {left: "0", rotationY : "0deg"});
    TweenMax.to(".circle9-3",0, {left: "0", rotationY : "0deg"});
});

//jquery
$("#btn9-1").click(function(){
    $(".circle9-1").delay(500).animate({left : "80%"},1000);
    $(".circle9-2").delay(700).animate({left : "80%"},1000);
    $(".circle9-3").delay(900).animate({left : "80%"},1000);
});

//  //jquery + GSAP
    $("#btn9-2").click(function(){
    TweenMax.to(".circle9-1",2, {left: "80%", delay : 1, rotationY : "360deg"});
    TweenMax.to(".circle9-2",2, {left: "80%", delay : 2, rotationY : "720deg"});
    TweenMax.to(".circle9-3",2, {left: "80%", delay : 3, rotationY : "1080deg"});
});

Transform - easing jquery Click GSAP Click Reset

box
box
box
box
box
box
box
box
//reset
$("#reset10").click(function(){
    $(".box10>div").animate({left: "0%"}, 0);
});

//jquery
$("#btn10-1").click(function(){
    $(".circle10-1").animate({left : "80%"},1000, "easeOutQuart");
    $(".circle10-2").animate({left : "80%"},1000, "easeOutBounce");
    $(".circle10-3").animate({left : "80%"},1000, "easeOutElastic");
    $(".circle10-4").animate({left : "80%"},1000, "easeOutCirc");
    $(".circle10-5").animate({left : "80%"},1000, "easeOutCubic");
    $(".circle10-6").animate({left : "80%"},1000, "easeOutExpo");
    $(".circle10-7").animate({left : "80%"},1000, "easeOutQuad");
    $(".circle10-8").animate({left : "80%"},1000, "easeOutBack");
});

//  //jquery + GSAP
    $("#btn10-2").click(function(){
    TweenMax.to(".circle10-1",1, {left: "80%", rotationX : "360deg", ease : "bounce.out"});
    TweenMax.to(".circle10-2",1, {left: "80%", rotationX : "360deg", ease : "steps(12)"});
    TweenMax.to(".circle10-3",1, {left: "80%", rotationX : "360deg", ease : "expo.out"});
    TweenMax.to(".circle10-4",1, {left: "80%", rotationX : "360deg", ease : "circ.inOut"});
    TweenMax.to(".circle10-5",1, {left: "80%", rotationX : "360deg", ease : "sine.inOut"});
    TweenMax.to(".circle10-6",1, {left: "80%", rotationX : "360deg", ease : "elastic.out(1, 0.3)"});
    TweenMax.to(".circle10-7",1, {left: "80%", rotationX : "360deg", ease : "back.in(1.7)"});
    TweenMax.to(".circle10-8",1, {left: "80%", rotationX : "360deg", ease : "power1.out"});
});

CallBacks jquery Click GSAP Click Reset

  • onComplete : 애니메이션이 완료되었을 때
  • onStart : 애니메이션이 시작할 때
  • onUpdate : 애니메이션이 업데이트 될 때마다
  • onRepeat : 애니메이션이 반복 될 때
  • onReverseComplete : 애니메이션이 리버스 되고 완료되었을 때
box
//reset
$("#reset11").click(function(){
    $(".circle11").animate({left: "0%"}, 0);
});

//jquery
$("#btn11-1").click(function(){
    $(".circle11").animate({left : "80%"},1000, "easeOutQuart", function(){
        $(".circle11").animate({left : "0%"},1000, "easeOutQuart");
    });
});

//  //jquery + GSAP
    $("#btn11-2").click(function(){
    TweenMax.to(".circle11",1, {left: "80%",  rotationX : "360deg",
    ease: "power1.out", onComplete: complete});
});
function complete(){
    TweenMax.to(".circle11",1, {left: "0", rotationX: "0deg"});
};

Controlling
play pause resume reverse seek(0.5) timeScale(0.5) timeScale(2) kill() restart() Reset

box
//  //jquery + GSAP
const tween = TweenMax.to(".circle12", 10, {left : "90%", borderRadius: "0%", rotation: "720deg"});
$("#reset12").click(function(){
    TweenMax.to(".circle12", 0, { left : "0", borderRadius: "50%", rotation: "0"});
});
$("#btn12-1").click(function(){ tween.play() });
$("#btn12-2").click(function(){ tween.pause() });
$("#btn12-3").click(function(){ tween.resume() });
$("#btn12-4").click(function(){ tween.reverse() });
$("#btn12-5").click(function(){ tween.seek(0.5) });
$("#btn12-6").click(function(){ tween.timeScale(0.5) });
$("#btn12-7").click(function(){ tween.timeScale(2) });
$("#btn12-8").click(function(){ tween.kill() });
$("#btn12-9").click(function(){ tween.restart() });

Timeline1 jquery Click GSAP Click GSAP Click2 Reset

box
//reset
$("#reset13").click(function(){
    $(".circle13").animate({left: "0%"}, 0);
    $(".circle13").css({"background-image" : "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%"}, 0);
});

//jquery
$("#btn13-1").click(function(){
    $(".circle13")
    .animate({left : "80%"},500)
    .animate({height : "300px"},500, "easeOutQuad")
    .animate({opacity : "0.5", borderRadius: "20%"},500, "easeOutElastic")
    .animate({height : "60px"},500, "easeOutQuad")
    .animate({opacity : "1", left : "0", borderRadius: "50%"},500)
});

//  //jquery + GSAP
    $("#btn13-2").click(function(){
    const tl = new TimelineLite();
    tl.to(".circle13", 0.5, {left: "80%"});
    tl.to(".circle13", 0.5, {height: "300px", ease : "power4.out"});
    tl.to(".circle13", 0.5, {opacity: "0.5", borderRadius: "0", ease : "power2.out"});
    tl.to(".circle13", 0.5, {height: "60px", ease : "power2.out"});
    tl.to(".circle13", 0.5, {opacity: "1", left: "0", borderRadius: "50%"});
});
//  //jquery + GSAP
$("#btn13-3").click(function(){
    const tl = new TimelineLite();
    tl.to(".circle13", 1, {left: "80%",scale: "0.5",rotation:"100deg" });
    tl.to(".circle13", 2, {left: "0%",opacity: 0.5, skewY: "720deg", rotation:"300deg",scale: "1" });
    tl.to(".circle13", 1, {left: "90%", rotation:"1000deg" , borderRadius: "0%", 
        scale: "0.5", backgroundImage: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"});
    tl.to(".circle13", 1, {rotation:"-2000deg"});
    tl.to(".circle13", 1, {opacity:1, left: "0", scale: "1", rotation:"-0deg"});
});

Repeat repeat repeatDelay yoyo infinity Reset

box
box
box
box
//reset
$("#reset14").click(function(){
    $(".circle14-1, .circle14-2, .circle14-3, .circle14-4").animate({left: "0%"}, 0);
});

//  //jquery + GSAP
$("#btn14-1").click(function(){
    TweenMax.to(".circle14-1", 2, {left: "80%", repeat: 1, ease: "power4.out" });
    TweenMax.to(".circle14-2", 2, {left: "80%", repeat: 2, ease: "power4.out" });
    TweenMax.to(".circle14-3", 2, {left: "80%", repeat: 3, ease: "power4.out" });
    TweenMax.to(".circle14-4", 2, {left: "80%", repeat: 4, ease: "power4.out" });
});

$("#btn14-2").click(function(){
    TweenMax.to(".circle14-1", 2, {left: "80%", repeat: 1, ease: "power4.out" });
    TweenMax.to(".circle14-2", 2, {left: "80%", repeat: 2, repeatDelay: 1, ease: "power4.out" });
    TweenMax.to(".circle14-3", 2, {left: "80%", repeat: 3, repeatDelay: 2, ease: "power4.out" });
    TweenMax.to(".circle14-4", 2, {left: "80%", repeat: 4, repeatDelay: 3, ease: "power4.out" });
});

$("#btn14-3").click(function(){
    TweenMax.to(".circle14-1", 2, {left: "80%", repeat: 1, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-2", 2, {left: "80%", repeat: 2, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-3", 2, {left: "80%", repeat: 3, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-4", 2, {left: "80%", repeat: 4, yoyo: true, ease: "power4.out" });
});

$("#btn14-4").click(function(){
    TweenMax.to(".circle14-1", 2, {left: "80%", repeat: -1, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-2", 2, {left: "80%", repeat: -1, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-3", 2, {left: "80%", repeat: -1, yoyo: true, ease: "power4.out" });
    TweenMax.to(".circle14-4", 2, {left: "80%", repeat: -1, yoyo: true, ease: "power4.out" });  //repeat -1과 yoyo: true를 주면 무한반복
});

Stagger Stagger Stagger2 Reset

box
box
box
box
//reset
$("#reset15").click(function(){
    $(".circle15-1, .circle15-2, .circle15-3, .circle15-4").animate({left: "0%"}, 0);
});

//  //jquery + GSAP
    $("#btn15-1").click(function(){
    TweenMax.staggerTo([".circle15-1", ".circle15-2", ".circle15-3", ".circle15-4"], 1, 
    {left: "80%", ease: "power4.out"}, 0.25);
});

//  //jquery + GSAP
$("#btn15-2").click(function(){
    TweenMax.staggerTo([".circle15-1", ".circle15-2", ".circle15-3", ".circle15-4"], 1, 
    {left: "80%", scale: 0.5, rotationY: "800deg", repeat: -1, yoyo: true, ease: "power4.out"}, 0.25);
});

sample1

See the Pen GSAP Candy Heart by MiSolJeong (@Soool) on CodePen.

sample2

See the Pen GSAP Title Animation by MiSolJeong (@Soool) on CodePen.

sample3

See the Pen GSAP-Rocket Animation by MiSolJeong (@Soool) on CodePen.