안녕하세요. 혀코입니다.
이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 애니메이션을 구현시 시간을 제어하는 방법에 대해서 알아보겠습니다.
아직 GSAP3 라이브러리를 설치 안해보셨다면,
GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다.
https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법
안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설
smilehugo.tistory.com
그럼 애니메이션의 시간을 제어하는 방법에 대해서 알아보겠습니다.
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>
<div class="container">
<div class="box box1"></div>
<p> </p>
<p> </p>
<div class="box box2"></div>
</div>>
<!-- 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>style.css 파일을 다음과 같이 작성합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 800px;
margin: 300px auto;
}
.container .box {
width: 100px;
height: 100px;
background-color: blue;
}custom.js 파일을 다음과 같이 작성합니다.
gsap.to('.box1', {x: 500, rotate: 360, duration: 3});
gsap.to('.box2', {x: 500, rotate: 360, duration: 5});시간은 duration 값으로 제어 가능합니다. duration 값은 초 단위가 되겠습니다.
box1에는 3초, box2에는 5초의 시간을 두었습니다.
preview:
프리뷰에서 볼 수 있듯이, box1 애니메이션은 총 3초에 걸쳐서 진행이 되느라 빨리 회전하는 것을 확인할 수 있고, box2 애니메이션은 총 5초에 걸쳐서 진행이 되기때문에 box1보다 느리게 회전하는 것을 확인할 수 있습니다.
이렇게 JavaScript GSAP3 라이브러리를 사용해서 애니메이션을 구현시 시간을 제어하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글