안녕하세요. 혀코입니다.
이번 시간에는 JavaScript GSAP3 애니메이션 속도 커브 옵션 14가지에 대해 알아보겠습니다.
아직 GSAP3 라이브러리를 설치 안해보셨다면,
GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다.
https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법
안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설
smilehugo.tistory.com
그럼 GSAP3 애니메이션 속도 커브 옵션 ease 14가지에 대해 알아보겠습니다.
ease 옵션 프리셋은 none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, sine 이렇게 14가지가 있습니다. 14개의 옵션 프리셋이 한눈에 어떻게 움직이는지 확인해 보겠습니다.
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>
<section id="title">
<div class="box box1">none</div>
<div class="box box2">power1</div>
<div class="box box3">power2</div>
<div class="box box4">power3</div>
<div class="box box5">power4</div>
<div class="box box6">back</div>
<div class="box box7">elastic</div>
<div class="box box8">bounce</div>
<div class="box box9">rough</div>
<div class="box box10">slow</div>
<div class="box box11">steps</div>
<div class="box box12">circ</div>
<div class="box box13">expo</div>
<div class="box box14">sine</div>
</section>
<!-- 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;
}
#title {
width: 700px;
margin: 100px auto;
}
.box {
background-color: purple;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 12px;
}custom.js 파일을 다음과 같이 작성합니다.
gsap.to('.box1', {x: 600, ease: 'none', duration: 5});
gsap.to('.box2', {x: 600, ease: 'power1', duration: 5});
gsap.to('.box3', {x: 600, ease: 'power2', duration: 5});
gsap.to('.box4', {x: 600, ease: 'power3', duration: 5});
gsap.to('.box5', {x: 600, ease: 'power4', duration: 5});
gsap.to('.box6', {x: 600, ease: 'back', duration: 5});
gsap.to('.box7', {x: 600, ease: 'elastic', duration: 5});
gsap.to('.box8', {x: 600, ease: 'bounce', duration: 5});
gsap.to('.box9', {x: 600, ease: 'rough', duration: 5});
gsap.to('.box10', {x: 600, ease: 'slow', duration: 5});
gsap.to('.box11', {x: 600, ease: 'steps(5)', duration: 5});
gsap.to('.box12', {x: 600, ease: 'circ', duration: 5});
gsap.to('.box13', {x: 600, ease: 'expo', duration: 5});
gsap.to('.box14', {x: 600, ease: 'sine', duration: 5});
preview:
참고로, ease 값을 power2.easeInOut 과 같이 변형해서 사용할 수 있고, elastic 같은 경우에는 elasitc(1, 0.5) 으로 변형해서 사용할 수 있습니다.
이렇게 JavaScript GSAP3 애니메이션 속도 커브 옵션 ease 14가지에 대해 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글