안녕하세요. 혀코입니다.
이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 애니메이션을 구현할 때 시간 지연 효과를 적용하는 방법에 대해서 알아보겠습니다.
아직 GSAP3 라이브러리를 설치 안해보셨다면,
GSAP 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다.
https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법
안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설
smilehugo.tistory.com
그럼 GSAP3 라이브러리를 사용해서 애니메이션을 구현할 때 시간 지연 효과를 적용하는 방법에 대해서 알아보겠습니다.
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="container">
<h1>JavaScript GSAP Library Animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolore.</p>
<a href="#">Button</a>
</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;
}
.container {
padding: 20px;
}
h1 {
margin-bottom: 20px;
}
p {
margin-bottom: 15px;
}
a {
display: block;
width: 100px;
padding: 10px;
background-color: blueviolet;
text-decoration: none;
color: white;
text-align: center;
border-radius: 10px;
}custom.js 파일을 다음과 같이 작성합니다.
gsap.from('h1',{y: 20, opacity: 0, duration: 1});
gsap.from('p',{y: 20, opacity: 0, duration: 1, delay: 1});
gsap.from('a',{y: 20, opacity: 0, duration: 1, delay: 2});시간 지연 효과는 delay로 지정할 수 있으며, 값은 초 단위로 지정할 수 있습니다.
preview:
이렇게 GSAP3 라이브러리를 사용해서 애니메이션을 구현할 때 시간 지연 효과를 적용하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글