GSAP은 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리이다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 jQuery에서 제공하는 .animate()나 fadeIn(), slideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다.
공식사이트에서 받거나 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>
gsap.to("타겟", {속성: 속성값, ....});
gsap.from("타겟", {속성: 속성값, ....});
gsap.fromTo("타겟", {시작 속성: 시작 속성값},{끝나는 속성: 끝나는 속성값});
//id를 설정하는 경우
gsap.to("target", {id: "myTween", duration: 1, x: 100});
//id를 불러오는 경우
gsap.getById("myTween")
//타임라인을 이용한 애니메이션 연속 작업
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("#id", "x"); // #id의 x 속성 값을 반환합니다. 20
gsap.getProperty("#id", "x", "px") // 단위를 적으면 단위 값을 반환합니다. "20px"
gsap.getProperty("#id", "backgroundColor") // 백그라운드 컬러 속성 값을 반환합니다.
//애니메이션 속성을 설정하고 애니메이션을 주는 경우
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});