GSAP Animation

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

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

Animation - 이동하기

animation

01
$(".btn1-0").click(function(){
    gsap.to(".animation01", {x: 0, rotation: 0, borderRadius: "50%", 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, duration: 2, scale: 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})
});

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

animation

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

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

animation

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

Animation - 움직임 효과

animation

04
04
04
04
04
04
04
$(".btn4-1").click(function(){
    gsap.to(".animation04-1", {left: leftWidth, rotationY: 360, ease: "power2.out", duration: 2});
    gsap.to(".animation04-2", {left: leftWidth, rotationY: 360, ease: "slow(0.7, 0.7, false)", duration: 2});
    gsap.to(".animation04-3", {left: leftWidth, rotationY: 360, ease: "steps(12)", duration: 2});
    gsap.to(".animation04-4", {left: leftWidth, rotationY: 360, ease: "rough({ template: none.out, strength: 1, points: 20, taper: 'none', randomize: true, clamp:  false})", duration: 2});
    gsap.to(".animation04-5", {left: leftWidth, rotationY: 360, ease: "circ.out", duration: 2});
    gsap.to(".animation04-6", {left: leftWidth, rotationY: 360, ease: "bounce.out", duration: 2});
    gsap.to(".animation04-7", {left: leftWidth, rotationY: 360, ease: "elastic.out(1, 0.3)", duration: 2});
});

Gsap Animation Sample01

GSAP를 이용한 애니메이션 입니다.

See the Pen Gsap Animation Sample01 by 1rrock (@zxcv1685) on CodePen.

Gsap Animation Sample02

GSAP를 이용한 애니메이션입니다.

See the Pen LYZopBy by 1rrock (@zxcv1685) on CodePen.

Gsap Animation Sample03

GSAP를 이용한 애니메이션입니다.

See the Pen Roket Animation by 1rrock (@zxcv1685) on CodePen.