안녕하세요. 혀코입니다.
이번 시간에는 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"></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('.box', {x: 500, rotate: 90});preview:
파란색 박스가 오른쪽으로 500 이동하면서 90도 회전하는 것을 확인하실 수 있습니다.
rotate 값은 각도입니다.
이번에는 한바퀴 회전할 수 있게 360로 값을 변경해 보겠습니다.
gsap.to('.box', {x: 500, rotate: 360});preview:
rotate 값을 360으로 변경하니 한바퀴 회전하는 것을 확인할 수 있습니다.
이런 형식으로 rotate 값을 720으로 변경하면 두바퀴 회전하게 됩니다.
이렇게 JavaScript GSAP3 라이브러리를 사용해서 회전 애니메이션을 구현하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글