GSAP 사용법 (입문)

웹클래스·2021년 5월 11일
0

gsap

목록 보기
1/8

머리말

공부하면서 이해했던 것들 쉽게 정리했습니다. 틀리거나 잘못된 정보이면 수정하겠습니다.

GSAP이란?

프런트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.

최신 버전 확인하기

GSAP CDN 확인하러가기

2021/05/11 현재 CDN 버전

GSAP CDN 복사해서 <head> 태그 안에 붙여넣고 jQuery CDN 있어야 작동합니다.

<!-- 2021/05/11 현재 CDN 버전 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

사용하기 전 준비 상태

<head> 태그 안에 GSAP CDN jQuery CDN 붙여넣습니다.

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
</head>

GSAP 기본 코드

자바스크립트 파일 생성 후 코드를 작성합니다.
gsap.to(' ') 안에 애니메이션 주고 싶은 태그를 작성합니다.

gsap.to('.contents', {
  y: 100,
  duration: 1,
});

여기까지가 GSAP 사용하기 전 준비 상태 및 기본 코드입니다.

profile
코드를 기록하는 공간

0개의 댓글