공부하면서 이해했던 것들 쉽게 정리했습니다. 틀리거나 잘못된 정보이면 수정하겠습니다.
프런트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.
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.to(' ') 안에 애니메이션 주고 싶은 태그를 작성합니다.
gsap.to('.contents', {
y: 100,
duration: 1,
});
여기까지가 GSAP 사용하기 전 준비 상태 및 기본 코드입니다.