GSAP

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

Move(to)

animation   

box
box
box
box
box
box
box
box
 $(".btn1").click(function(){
    //$(".box1 > div").animate({left : "90%"}, 1000);
    gsap.to(".box1 .circle1", 2, {left: "90%"});
    gsap.to(".box1 .circle2", 2, {left: "90%", borderRadius: "0%"});           
    gsap.to(".box1 .circle3", 2, {left: "90%", rotationY: "800deg"});
    gsap.to(".box1 .circle4", 2, {left: "90%", rotationX: "800deg"});
    gsap.to(".box1 .circle5", 2, {left: "90%", backgroundImage: "linear-gradient(to right, #fa709a 0%, #fee140 100%)", rotation: "800deg"});
    gsap.to(".box1 .circle6", 2, {left: "90%", scale: "0.5", rotationY: "300deg"});
    gsap.to(".box1 .circle7", 5, {left: "90%", scale: "3"});
    gsap.to(".box1 .circle8", 2, {left: "90%", skew: "0.5"});            
});

Move(from)

animation   

box
box
box
box
box
box
box
box
$(".btn2").click(function(){
    gsap.from(".box2 .circle1", 2, {left: "90%"});
    gsap.from(".box2 .circle2", 2, {left: "90%", borderRadius: "0%"});           
    gsap.from(".box2 .circle3", 2, {left: "90%", rotationY: "800deg"});
    gsap.from(".box2 .circle4", 2, {left: "90%", rotationX: "800deg"});
    gsap.from(".box2 .circle5", 2, {left: "90%", backgroundImage: "linear-gradient(to right, #fa709a 0%, #fee140 100%)", rotation: "800deg"});
    gsap.from(".box2 .circle6", 2, {left: "90%", scale: "0.5", rotationY: "300deg"});
    gsap.from(".box2 .circle7", 5, {left: "90%", scale: "3"});
    gsap.from(".box2 .circle8", 2, {left: "90%", skew: "0.5"});            
});

Move(easing)

animation   

box
box
box
box
box
box
box
box
box
$(".btn3").click(function(){
    gsap.to(".box3 .circle1", {duration: 2, left: "90%", rotationY: "300deg", ease: "power1.out"});
    gsap.to(".box3 .circle2", {duration: 2, left: "90%", rotationY: "310deg", ease: "power2.out"});           
    gsap.to(".box3 .circle3", {duration: 2, left: "90%", rotationY: "320deg", ease: "power3.out"});
    gsap.to(".box3 .circle4", {duration: 2, left: "90%", rotationY: "330deg", ease: "power4.out"});
    gsap.to(".box3 .circle5", {duration: 2, left: "90%", rotationY: "340deg", ease: "back.out(1.7)"});
    gsap.to(".box3 .circle6", {duration: 2, left: "90%", rotationY: "350deg", ease: "elastic.out(1, 0.3)"});
    gsap.to(".box3 .circle7", {duration: 2, left: "90%", rotationY: "360deg", ease: "bounce.out"});
    gsap.to(".box3 .circle8", {duration: 2, left: "90%", rotationY: "370deg", ease: "slow(0.7, 0.7, false)"});            
    gsap.to(".box3 .circle9", {duration: 2, left: "90%", rotationY: "380deg", ease: "steps(12)"});            
});

Move(repeat-반복)

animation   

box
box
box
box
box
 $(".btn4").click(function(){
    gsap.to(".box4 .circle1", {duration: 1, repeat: 1, yoyo: true, left: "90%", rotation: "720deg", ease: "power4.out"});
    gsap.to(".box4 .circle2", {duration: 1, repeat: 2, yoyo: true, left: "90%", rotation: "720deg", ease: "power4.out"});
    gsap.to(".box4 .circle3", {duration: 1, repeat: 3, yoyo: true, left: "90%", rotation: "720deg", ease: "power4.out"});
    gsap.to(".box4 .circle4", {duration: 1, repeat: 4, yoyo: true, left: "90%", rotation: "720deg", ease: "power4.out"});
    gsap.to(".box4 .circle5", {duration: 1, repeat: -1, yoyo: true, left: "90%", rotation: "720deg", ease: "power4.out"});
});

Timeline

animation   

box
$(".box5").css("height","400px");
$(".btn5").click(function(){
    let tl = new TimelineMax();
    tl.to(".box5 .circle1", {duration: 1, left: "90%", scale: "1", ease: "power2.out"})
        .to(".box5 .circle1", {duration: 1, top: "80%", scale: "0.5", ease: "power2.out"})
        .to(".box5 .circle1", {duration: 1, left: "0", scale: "2.5", ease: "power2.out"})
        .to(".box5 .circle1", {duration: 1, top: "0", scale: "1", ease: "power2.out"})
});

Controlling

animation   

box
const tw = gsap.to(".box6 .circle1", {duration: 10, left: "90%", borderRadius: "0%", rotation: "720deg"});
tw.pause();
$(".btn6").click(function(){
    gsap.to(".box6 .circle1", {duration: 10, left: "90%", borderRadius: "0%", rotation: "720deg"});
});
$(".btn6-1").click(function(){tw.play()});
$(".btn6-2").click(function(){tw.pause()});
$(".btn6-3").click(function(){tw.resume()});
$(".btn6-4").click(function(){tw.reverse()});
$(".btn6-5").click(function(){tw.seek(0.5)});
$(".btn6-6").click(function(){tw.timeScale(0.5)});
$(".btn6-7").click(function(){tw.timeScale(2)});
$(".btn6-8").click(function(){tw.kill()});
$(".btn6-9").click(function(){tw.restart()});

CallBacks

  • onComplete : 애니메이션이 완료되었을 때
  • onStart : 애니메이션이 시작할 때
  • onUpdate : 애니메이션이 업데이트 될 때마다
  • onRepeat : 애니메이션이 반복될 때
  • onReverseComplete : 애니메이션이 리버스 되고 완료되었을 때

animation   

box
//jquery
$(".btn7-1").click(function(){
    $(".box7 .circle1").animate({left: "90%"}, 1000, function(){
        $(".box7 .circle1").animate({left: "0%"}, 1000);
    });
});
//gsap
$(".btn7-2").click(function(){
    gsap.to(".box7 .circle1", {duration: 1, left: "90%", onComplete: com});
});

function com(){
    gsap.to(".box7 .circle1", {duration: 1, left: "0"})
}

Gsap Animation2

See the Pen Gsap - Animation1 by 김용태 (@sdw6545) on CodePen.

Gsap Animation2

See the Pen Gsap Animation2 by 김용태 (@sdw6545) on CodePen.