안녕하세요. 혀코입니다.
이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다.
GSAP3 라이브러리를 설치하기 위해서는 CDN 링크 또는 js 파일이 필요합니다.
CDN 링크는 https://cdnjs.com/libraries/gsap 에서 확인이 가능하며 현재 CDN 링크는 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js 입니다.
CDN 링크가 아닌 JS 파일을 사용하시길 원하시는 분들은 아래 파일을 사용하시면 됩니다.
여기서는 CDN 링크를 통해서 GSAP3 라이브러리를 설치하는 방법으로 진행하겠습니다.
다른 JavaScript 라이브러리와 마찬가지로, GSAP3 라이브러리도 body 태그 마지막 부분에 다음과 같이 추가시켜주면 설치가 완료됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documents</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<!-- GSAP JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<!-- Custom JavaScript -->
<script src="./src/custom.js"></script>
</body>
</html>
위와 같이 설치가 완료되었다면, 제대로 설치가 완료되었는지 테스트를 해보겠습니다.
index.html 파일을 다음과 같이 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documents</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<header>
<h1>JavaScript GSAP Library Animation</h1>
</header>
<!-- GSAP JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<!-- Custom JavaScript -->
<script src="./src/custom.js"></script>
</body>
</html>header 태그를 추가하고, h1 태그를 header 태그 안에 추가했습니다.
style.css 파일을 다음과 같이 작성합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}header 태그의 세로값을 100vh 지정해서 한 화면에 꽉차도록 했습니다.
custom.js 파일을 다음과 같이 작성합니다.
gsap.from('header h1', {y: 30, opacity: 0});gsap.from 으로 애니메이션이 시작이 될때의 위치값과 투명도를 지정해줬습니다.
애니메이션이 잘 작동하네요. ^^ 설치가 제대로 된 것으로 확인됩니다.
참고로 GSAP3에 대한 정보는 https://greensock.com/ 에서 확인 가능합니다.
GreenSock
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
greensock.com
이렇게 JavaScript GSAP3 라이브러리를 설치하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글