영벨롭 개발 일지

[JavaScript]자바스크립트 GSAP 라이브러리 사용하기: gsap.to() 본문

Programming Language/JavaScript

[JavaScript]자바스크립트 GSAP 라이브러리 사용하기: gsap.to()

영벨롭 2022. 4. 19. 16:40

[ GSAP 이란? ]

 

 GSAP 은 GreenSock에서 만든 자바스크립트 애니메이션 라이브러리 (오픈소스) 입니다. 

 

 

 

[ 라이브러리 가져오기 ]

 

 구글에 gsap cdn 이라고 검색하고 다음 링크로 이동하셔서 코드를 복사합니다. 

 

https://cdnjs.com/libraries/gsap

 

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive

cdnjs.com

 

 

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <!-- gsap 외부 라이브러리 불러오기 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.3/gsap.min.js"
    integrity="sha512-6zTDRWNxo8vI6JZYDCwhrJpg5icK3P4HNnW3czsO5Scb3lAoPDam+/wF3eog4hxcl0h44d0XlIcFkuoSaWHQ2g=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- main.css 연결 -->
  <link rel="stylesheet" href="./css/main.css">
  <!-- main.js 연결 -->
  <script defer src="./js/main.js"></script>
</head>

<body>

</body>

</html>

 

 

 

[ gsap.to() ]

 

//기본형
gsap.to(요소, 지속시간(s), {
	속성: 속성값,
    	속성: 속성값,
    	...
});

 

  gsap.to(요소, 지속시간(s), 옵션) 은 해당 요소에 옵션에 해당하는 애니메이션 효과를 지속시간동안 실행시켜주는 함수입니다. 

 

  예시로 box1이라는 클래스명을 가진 <div> 요소를 지속시간은 3초, 옵션으로는 x축으로 200 만큼 이동하는 gsap.to() 함수를 실행하겠습니다. 

 

gsap.to('.box1', 3, {
  x: 200
});

 

 

 

 

 

[ Properties ]

 

 다음 링크에서 더 자세한 속성들을 확인할 수 있습니다. 

 

https://greensock.com/docs/v3/GSAP/gsap.to() 

 

Docs

Documentation for GreenSock Animation Platform (GSAP)

greensock.com

 

속성 설명
css 속성들 속성 값 (숫자는 그대로, 문자열은 ' ' 또는 " " 과 함께)
delay 지연 시간 (초단위), 애니메이션이 몇 초 뒤에 실행될지
duration 지속 시간 (초단위), 기본값 0.5
x x축으로 이동
y y축으로 이동
repeat 애니메이션 반복 유무
1 : 2번 반복
-1 : 무한 반복
0 : 기본값, 1번만
yoyo 한 번 재생된 애니메이션을 다시 뒤로 재생 유무
true : 다시 뒤로 재생, back and forth
false : 다시 뒤로 재생하지 않음, 기본값
ease 애니메이션 실행중, 변화율 제어
https://greensock.com/docs/v2/Easing 참고

 

 

 

 

[ 예제 ]

 

 

 지연시간은 0.5초, 한 번 움직일 때마다 x축으로 200만큼 이동, 앞 뒤로 왔다갔다를 무한반복하고 ease는 Power1.easeInOut, 지속시간은 1.5초인 애니메이션 효과 주기

 

gsap.to('.box1', 1.5, {
  x: 200,
  delay: .5,
  repeat: -1,
  yoyo: true,
  ease: Power1.easeInOut
});

 

 

 

반응형
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript]자바스크립트 lodash 라이브러리: debounce, throttle  (0) 2022.04.21
[JavaScript]자바스크립트 DOM API란?  (0) 2022.04.21
[JavaScript]자바스크립트로 input 박스 제어  (0) 2022.04.19
[JavaScript]자바스크립트 이벤트 event : 이벤트 리스너, 이벤트 종류, preventDefault  (0) 2022.04.15
[JavaScript]Math 객체 다루기: min, max, random, round, ceil, floor  (0) 2022.03.20
'Programming Language/JavaScript' Related Articles more