GSAP

one_k·2022년 10월 29일
3
post-thumbnail

GSAP?

GSAP은 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리이다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 jQuery에서 제공하는 .animate()나 fadeIn(), slideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다.

1. 설치

공식사이트에서 받거나 CDN, 혹은 npm install gsap로 설지할 수 있다.

파일의 종류가 정말 많지만 가장 기본이 되는 gsap.js 혹은 gsap.min.js 만 사용해보자.

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <script src="script.js"></script>
</body>

2. 기본 메서드

gsap.to()

  • 움직임의 끝나는 점을 지정하는 애니메이션이다.
  • CSS의 애니메이션과 관련된 모든 속성을 사용할 수 있다.
  • 제어하려면, 여러가지 컨트롤 메서드를 사용할 수 있다.
gsap.to("타겟", {속성: 속성값, ....});

gsap.from()

  • 움직임의 시작 지점을 지정해주는 애니메이션이다.
  • gsap.to()와 반대이다.
gsap.from("타겟", {속성: 속성값, ....});

gsap.fromTo()

  • 움직임의 시작점과 끝점을 지정해주는 애니메이션이다.
  • 시작하는 점과 끝나는 점을 모두 설정할 수 있다.
  • css속성을 따로 수정하지 않고 스크립트로 애니메이션을 완벽하게 통제 할 수 있다.
gsap.fromTo("타겟", {시작 속성: 시작 속성값},{끝나는 속성: 끝나는 속성값});

gsap.getById()

  • 애니메이션이 id값을 설정하거나 id값을 불러 올 때 사용한다.
  • css선택자 id값과 별개로 사용한다.
  • id값이 없으면 undefined를 반환한다.
//id를 설정하는 경우
gsap.to("target", {id: "myTween", duration: 1, x: 100});

//id를 불러오는 경우
gsap.getById("myTween")

gsap.timeline()

  • 연속적인 애니메이션을 설정한다.
//타임라인을 이용한 애니메이션 연속 작업
const tl = gsap.timeline();
tl.to("#id", {x: 50, duration: 1});
tl.to("#id", {x: 150, duration: 1});
tl.to("#id", {x: 100, duration: 1});

gsap.getProperty()

  • 요소의 속성 값을 가져온다.
  • 단위를 적지 않으면 숫자만 반환되고, 단위를 적으면 단위까지 같이 반환된다.
  • 값이 없을 경우 null을 반환한다.
gsap.getProperty("#id", "x"); // #id의 x 속성 값을 반환합니다. 20
gsap.getProperty("#id", "x", "px") // 단위를 적으면 단위 값을 반환합니다. "20px"
gsap.getProperty("#id", "backgroundColor") // 백그라운드 컬러 속성 값을 반환합니다. 

gsap.set()

  • 요소의 속성 값을 설정한다.
  • 요소의 속성 값을 즉시 실행한다. 보통 gsap.to() 메서드와 같이 사용한다.
  • 여러개의 속성을 동시에 설정할 수 있다. 여러 번 반복해서 사용할 경우 성능 향상을 위해 gsap.quickSetter()메서드를 고려 할 수 있다.
//애니메이션 속성을 설정하고 애니메이션을 주는 경우
gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0.4, x: 100, y: 50, opacity: 1});

//타겟을 여러개로 설정할 경우
gsap.set([".class1", ".class2", ".class3"], {x: 100, y: 50, opacity: 0});

0개의 댓글