여러분 안녕하세요. 혀코입니다.
이번 시간에는 JavaScript 애니메이션을 위한 GSAP3 라이브러리의 기본이 되는 gsap.to 와 gsap.from 을 사용하는 방법과 차이점에 대해서 알아보겠습니다.
아직 GSAP3 라이브러리를 설치 안해보셨다면,
GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다.
https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법
안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설
smilehugo.tistory.com
그럼, gsap.to 와 gsap.from 의 차이점에 대해서 알아보겠습니다.
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>
<header>
<h1>JavaScript GSAP Library Animation</h1>
</header>
<!-- 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;
}
header {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}custom.js 파일을 다음과 같이 작성합니다.
gsap.from('header h1', {y: 30, opacity: 0});preview:
gsap.from을 사용하면, 애니메이션이 시작되는 지점의 해당 태그의 속성을 지정할 수 있습니다.
여기서 y 값을 30, opacity 값을 0으로 지정했으므로, 세로로 30 추가된 지점에서 투명도가 0인 상태로 시작해서 원래 태그의 속성인 세로로 -30 이 줄어들고 투명도가 1인 상태로 애니메이션이 적용 됩니다.
그럼 gsap.to에 대해 알아보기 위해 위의 custom.js 파일을 다음과 같이 업데이트 합니다.
gsap.to('header h1', {y: 30, opacity: 0});preview:
gsap.to 는 애니메이션이 끝나는 지점의 태그의 속성을 지정합니다.
y 값이 30, opacity 값을 0으로 지정했으므로, 원래의 세로값에서 30px 추가된 위치에서 사라지는 애니메이션이 적용됩니다.
이렇게 JavaScript 애니메이션을 위한 GSAP3 라이브러리의 기본이 되는 gsap.to 와 gsap.from 의 사용하는 방법과 차이점에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글