Animation

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

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

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

animation

01
const leftWidth = $(".sample").width()-120;
    const leftHeight = $(".sample").height()-140;

    $(".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:2});
        
    });
    $(".btn1-3").click(function(){
        gsap.to(".animation01",{x: leftWidth,rotation: 360, borderRadius:5, scale:2, duration:2});
        
    });
    $(".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, opacitiy:0})
});
$(".btn2-3").click(function(){
    gsap.from(".animation02",{duration:1, x:500, opacitiy:0})
});

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

animation

03
$(".btn3-1").click(function(){
    gsap.fromTo(".animation03", 
    {opacitiy: 0, x: 0, y:0}, 
    {opacitiy: 1, x: 500, y: 100, borderRadius:"10%", 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: "power1.out"})
    gsap.to(".animation04-2",{duration: 2, left: leftWidth, rotationY:360, ease: "power3.out"})
    gsap.to(".animation04-3",{duration: 2, left: leftWidth, rotationY:360, ease: "back.out(1.7)"})
    gsap.to(".animation04-4",{duration: 2, left: leftWidth, rotationY:360, ease: "elastic.out(1, 0.3)"})
    gsap.to(".animation04-5",{duration: 2, left: leftWidth, rotationY:360, ease: "bounce.out"})
    gsap.to(".animation04-6",{duration: 2, left: leftWidth, rotationY:360, ease: "slow(0.7, 0.7, false)"})
    gsap.to(".animation04-7",{duration: 2, left: leftWidth, rotationY:360, ease: "steps(12)"})
});