JS 애니메이션 스크립트 라이브러리,
gsap의 사용법입니다.
일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다.
하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하는 추세이고,
css에서 제공하는 것, 그 이상의 복잡한 애니메이션을 구현해야할 경우가 있습니다.
예를 들어, css의 dispaly 요소에 none과 block을 이용한 효과를 주었을 때,
영역이 나타나고, 사라지는 부분이 부자연스러울 경우,
이를 해결하기 위해 보다 자연스럽게 요소를 제어해주는
자바스크립트 애니메이션 라이브러리를 사용합니다.
라이브러리를 사용하면, 자바스크립트를 통해 html 요소에 간단한 애니메이션을 추가할 수 있습니다.
GSAP
GSAP는 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하여 추천합니다.
gsap cdn 설치
- 구글에서 gsap cdn을 검색하여 https://cdnjs.com/libraries/gsap 사이트로 들어갑니다.
- 가장 위에 있는 gsap.min.js 의 copy scrip tag를 이용해 복사합니다.
- vs code와 같은 웹에디터의 <head> 태그 사이에 복사합니다. 단, main.js 파일 위 부분의 위치에 복사합니다.
gsap.to()
gsap.to(selector명/변수명, 지속시간, {효과 옵션 -> css속성: 값})
gsap.to() 버튼 클릭시 show, hide 토글 기능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.subject {
width: 350px;
text-align: center;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="inner">
<h2 class="subject">GSAP Animation Effect</h2>
<button class="btn">버튼</button>
</div>
<script>
const btn = document.querySelector('.btn');
const subject = document.querySelector('.subject');
let isHide = false; //토글 기능 위치 변수 선언
btn.addEventListener('click', function() {
isHide = !isHide //토글 기능
if (isHide) { //true -> false였다가 !isHide로 true가 됨
gsap.to('.subject', .6, { //사라짐
opacity: 0,
display: 'none'
})
btn.innerHTML = '나타나기'
} else { //false
gsap.to('.subject', .6, { //나타남
opacity: 1,
display: 'block'
})
btn.innerHTML = '사라지기'
}
});
</script>
</body>
</html>
화면 보기 (Result 클릭)
gsap.to() 반복문으로 하나씩 출현 예제
forEach() 메소드를 이용하여 시간차를 주면서 하나씩 보이게 하는 효과를 설정합니다 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js" integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.fade-in {
width: 100px;
height: 100px;
border: 1px solid #dedede;
opacity: 0;
}
.box1 {
background-color: skyblue;
}
.box2 {
background-color: orange;
}
.box3 {
background-color: pink;
}
</style>
</head>
<body>
<div class="inner">
<div class="fade-in box1">
1번
</div>
<div class="fade-in box2">
2번
</div>
<div class="fade-in box3">
3번
</div>
</div>
<script>
const btn = document.querySelector('.btn');
const subject = document.querySelector('.subject');
btn.addEventListener('click', function() {
gsap.to('.subject', .6, {
opacity: 0,
display: 'none'
})
});
const fadeEls = document.querySelectorAll('.fade-in');
fadeEls.forEach((fadeEl, index) => {
gsap.to(fadeEl, 1, {
delay: (index + 1) * 0.7, //0.7 1.4 2.1초 에 하나씩 출현
opacity: 1
})
})
</script>
</body>
</html>
화면 보기 (Result 클릭)
반응형
'개발 > Javascript' 카테고리의 다른 글
| [js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) (0) | 2021.06.08 |
|---|---|
| [js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 (0) | 2021.06.02 |
| [js] 글자 타이핑 효과 라이브러리 소개 (2) | 2021.05.08 |
| [js] react로 구구단 게임 만들기(ft. 클래스 방식, cdn 설치) (0) | 2021.03.14 |
| [js] 카드 공격 게임 완성 (ft. 자바스크립트로 자스스톤 게임 구현 ver.4) (0) | 2021.03.12 |
댓글