Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. gsap) - 2편
2023. 2. 25. 15:30ㆍVite
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
반응형
Vite에서 모듈들 간단하게 설치해서 사용하기, gsap 편입니다.
GSAP
Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste
greensock.com
GSAP는 화려한 애니메이션을 옵션만 숙지한다면, 보다 쉽게 애니메이션을 구현할 수 있는 좋은 모듈입니다.
1. gsap 설치하기
npm i gsap
package.json 파일에 gsap 패키지가 설치된 것을 확인하실 수 있습니다.
2. main.js에 gsap 가져오기(import)
/* main.js */
import './scss/style.scss'
import { gsap } from 'gsap';
//애니메이션 추가
gsap.to('.box', {
x: 500,
duration: 2
}, 1)/* style.scss */
@import url(./reset.scss);
/* 박스 스타일 */
.box{
width: 100px;
height: 100px;
outline: 2px solid red;
}<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
3. scrollTrigger 추가하기
스크롤과 함께 구현되는 애니메이션이 요즘 트렌드이기 때문에 scrollTrigger도 함께 추가합시다. 디버깅할 때 유용합니다.
ScrollTrigger 플러그인을 가져오고 등록해야 속성값으로 사용할 수 있습니다.
/* main.js */
import './scss/style.scss'
import { gsap } from 'gsap';
//스크롤트리거 가져오기
import ScrollTrigger from 'gsap/ScrollTrigger';
//스크롤트리거 등록하기
gsap.registerPlugin(ScrollTrigger);
gsap.to('.box', {
scrollTrigger: {
trigger: '.box',
markers: true,
toggleActions: 'play reverse none none'
},
x: 500,
duration: 2
}, 1)
이렇게 vite에서 쉽고 간단하게 gsap 플러그인을 설치하고 사용하는 방법에 대해서 알아보았습니다.
반응형
'Vite' 카테고리의 다른 글
| Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. swiper) - 3편 (0) | 2023.02.27 |
|---|---|
| Vite에서 모듈들 간단하게 설치해서 사용하기 (feat. sass) - 1편 (0) | 2023.02.24 |
| 간단하게 Vite로 프로젝트 생성하는 방법 (0) | 2023.02.23 |