여러분 안녕하세요. 혀코입니다.
이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 같은 Class를 가진 태그들을 일정한 시간단위에 따라 순차적으로 애니메이션을 실행하는 방법에 대해서 알아보겠습니다.
아직 GSAP3 라이브러리를 설치 안해보셨다면,
GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다.
https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법
안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설
smilehugo.tistory.com
그럼 같은 Class를 가진 태그들을 일정한 시간단위에 따라 순차적으로 애니메이션을 실행하는 방법에 대해서 알아보겠습니다.
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 class="animation1">JavaScript GSAP Library Animation</h1>
<p class="animation1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, dolore.</p>
<a class="animation1" 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>h1, p, a 태그에 animation1 클래스를 추가해줬습니다.
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('.animation', {y: 20, opacity: 0, stagger: 0.5});셀렉터를 .animation으로 잡았습니다.
preview:
동일한 animation1 클래스를 가진 h1, p, a 태그가 0.5 초 간격으로 애니메이션 되는 것을 확인하실 수 있습니다.
이렇게 JavaScript GSAP3 라이브러리를 사용해서 같은 Class를 가진 태그들을 일정한 시간단위에 따라 순차적으로 애니메이션을 실행하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
궁금하신 점이 있으시다면, 댓글로 문의 주시면 답변 드리겠습니다.
감사합니다.
댓글