GSAP

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

SITE

이동하기(to)

animation

box
box
box
box
box
box
box
box
box
$(".btn1").click(function(){
    //$(".box1 > div").animate({ left : "90%"},1000)
    gsap.to(".box1 .circle1", 1, {left: "90%"})        //to :이동하다
    gsap.to(".box1 .circle2", 1, {left: "90%", borderRadius: "0%"}) 
    gsap.to(".box1 .circle3", 1, {left: "90%", rotationY : "300deg"}) 
    gsap.to(".box1 .circle4", 1, {left: "90%", rotationX : "700deg"}) 
    gsap.to(".box1 .circle5", 1, {left: "90%", backgroundImage: "linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)"}) 
    gsap.to(".box1 .circle6", 1, {left: "90%", scale:"3", rotationY : "300deg"}) 
    gsap.to(".box1 .circle7", 1, {left: "90%", scale:"3", rotation : "1300deg"}) 
    gsap.to(".box1 .circle8", 1, {left: "90%", scale:"0.5"}) 
    gsap.to(".box1 .circle9", 1, {left: "90%", skewX:"30deg"}) 
});

이동하기(from)

animation

box
box
box
box
box
box
box
box
box
$(".btn2").click(function(){
    //$(".box2 > div").animate({ left : "90%"},1000)
    gsap.from(".box2 .circle1", 1, {left: "90%"})        // from : 반대로 이동
    gsap.from(".box2 .circle2", 1, {left: "90%", borderRadius: "0%"}) 
    gsap.from(".box2 .circle3", 1, {left: "90%", rotationY : "300deg"}) 
    gsap.from(".box2 .circle4", 1, {left: "90%", rotationX : "700deg"}) 
    gsap.from(".box2 .circle5", 1, {left: "90%", backgroundImage: "linear-gradient(to right, #ffecd2 0%, #fcb69f 100%)"}) 
    gsap.from(".box2 .circle6", 1, {left: "90%", scale:"3", rotationY : "300deg"}) 
    gsap.from(".box2 .circle7", 1, {left: "90%", scale:"3", rotation : "1300deg"}) 
    gsap.from(".box2 .circle8", 1, {left: "90%", scale:"0.5"}) 
    gsap.from(".box2 .circle9", 1, {left: "90%", skewX:"30deg"}) 
});

이동하기(easing)

animation

box
box
box
box
box
box
box
box
box
$(".btn3").click(function(){
    //$(".box3 > div").animate({ left : "90%"},1000)
    gsap.to(".box3 .circle1",  {duration: 2, left: "90%", rotationY : "300deg", ease: "power1.out"})        //to :이동하다
    gsap.to(".box3 .circle2",  {duration: 2, left: "90%", rotationY : "300deg", ease: "power2.out"}) 
    gsap.to(".box3 .circle3",  {duration: 2, left: "90%", rotationY : "300deg", ease: "power3.out"}) 
    gsap.to(".box3 .circle4",  {duration: 2, left: "90%", rotationY : "300deg", ease: "power4.out"}) 
    gsap.to(".box3 .circle5",  {duration: 2, left: "90%", rotationY : "300deg", ease: "back.out(1.7)"}) 
    gsap.to(".box3 .circle6",  {duration: 2, left: "90%", rotationY : "300deg", ease: "elastic.out(1, 0.3)"}) 
    gsap.to(".box3 .circle7",  {duration: 2, left: "90%", rotationY : "300deg", ease: "bounce.out"}) 
    gsap.to(".box3 .circle8",  {duration: 2, left: "90%", rotationY : "300deg", ease: "steps(12)"}) 
    gsap.to(".box3 .circle9",  {duration: 2, left: "90%", rotationY : "300deg", ease: "slow(0.7, 0.7, false)"}) 
});

반복하기

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"})   //yoyo : 다시 돌아옴
});

Timeline : 타임 라인은 전체 애니메이션의 타이밍을 관리

animation

box
$(".box5").css("height","550px");
$(".btn5").click(function(){
    let tl = new TimelineMax({repeat: 2}); 
    tl.to(".box5 .circle1", {duration:1, left: "90%", ease: "power2.out"})
        .to(".box5 .circle1", {duration:1, top: "90%",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
$(".btn7-1").click(function(){
    $(".box7 .circle").animate({left:"90%"}, 1000, function(){
        $(".box7 .circle").animate({left:"0"}, 1000,)
    });
});

$(".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 Animation

See the Pen Gasp Animation2 by lee sejin (@iuu0304) on CodePen.