Animation

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

유형 메서드 설명
Methods gsap.to() 일반적인 유형의 애니메이션을 정의합니다.
gsap.from() 일반적인 유형의 애니메이션 방향을 반대로 정의합니다.
gsap.fromTo()
gsap.set()
gsap.timeline()

Animation01 - 이동하기 : gsap.to()

animation

01
$(".btn1-0").click(function(){
    gsap.to(".animation01",{x: 0, borderRadius: "50%", rotation: 0, scale:1});
});
$(".btn1-1").click(function(){
    gsap.to(".animation01",{x: leftWidth, duration: 2});
});
$(".btn1-2").click(function(){
    gsap.to(".animation01",{x: leftWidth, rotation: 360, borderRadius: 5, duration: 1});
});
$(".btn1-3").click(function(){
    gsap.to(".animation01",{x: leftWidth, rotation: 360, borderRadius: 5, scale:2, duration: 1});
});
$(".btn1-4").click(function(){
    var tl = gsap.timeline();
    tl.to(".animation01",{x: leftWidth, duration: 1})
    .to(".animation01",{y: leftHeight, duration: 1})
    .to(".animation01",{x: 0, duration: 1})
    .to(".animation01",{y: 0, duration: 1});
});

Animation02 - 이동하기 : gsap.from()

animation

02
02
02
$(".btn2-1").click(function(){
    gsap.from(".animation02",{duration: 1, x: leftWidth});
});
$(".btn2-2").click(function(){
    gsap.from(".animation02",{duration: 1, y: 100, opacity:0});
});
$(".btn2-3").click(function(){
    gsap.from(".animation02",{duration: 1, x: 500, opacity:0});
});

Animation03 - 이동하기 : gsap.fromTo()

animation

03
$(".btn2-1").click(function(){
    gsap.from(".animation02",{duration: 1, x: leftWidth});
});
$(".btn2-2").click(function(){
    gsap.from(".animation02",{duration: 1, y: 100, opacity:0});
});
$(".btn2-3").click(function(){
    gsap.from(".animation02",{duration: 1, x: 500, opacity:0});
});

$(".btn3-1").click(function(){
    gsap.fromTo(".animation03", {opacity: 0, x: 0, y:0}, {opacity: 1, x: 500, y:100, borderRadius: "50%", duration: 1})
});

Animation04 - 움직임 효과

animation

04
04
04
04
04
04
04
$(".btn4-1").click(function(){
    gsap.to(".animation04-1", {duration: 2, left: leftWidth, rotationY: 360, ease: "back.out(1.7)"})
    gsap.to(".animation04-2", {duration: 2, left: leftWidth, rotationY: 360, ease: "bounce.out"})
    gsap.to(".animation04-3", {duration: 2, left: leftWidth, rotationY: 360, ease: "slow(0.7, 0.7, false)"})
    gsap.to(".animation04-4", {duration: 2, left: leftWidth, rotationY: 360, ease: "circ.out"})
    gsap.to(".animation04-5", {duration: 2, left: leftWidth, rotationY: 360, ease: "power1.out"})
    gsap.to(".animation04-6", {duration: 2, left: leftWidth, rotationY: 360, ease: "power3.out"})
    gsap.to(".animation04-7", {duration: 2, left: leftWidth, rotationY: 360, ease: "power4.out"})
});

Animation05 - 무한 애니메이션

animation

08

Animation06 - 일정한 시간 애니메이션

animation

09
$("#intro6 > button").click(function(){
    setInterval(time, 4000);
});
function time(){
    $(".animation09")
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint")
        ;
}

Animation07 - 사라지는 애니메이션

animation

10
$("#intro7 > button").click(function(){
    $(".animation10")
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint");
    setTimeout(out,4000);
});

function out(){
    $(".animation10").clearQueue().hide();
}

Animation08 - 콜백 함수

animation

11
$("#intro8 > button").click(function(){
    $(".animation11")
        .animate({left: leftWidth},500,"easeOutQuint")
        .animate({top: leftHeight},500,"easeOutQuint")
        .animate({left: "0%"},500,"easeOutQuint")
        .animate({top: "0%"},500,"easeOutQuint", function(){
            alert("도착");
        });
});

GSAP Animation - 01

See the Pen GSAP Animation Sample01 by heemwon (@heemwon) on CodePen.

GSAP Animation - 02

See the Pen GSAP Animation Sample02 by heemwon (@heemwon) on CodePen.

GSAP Animation - 03

See the Pen Rocket Animation by heemwon (@heemwon) on CodePen.