GSAP Variables (트윈 제어 - Style Controlling )
이전 '기초 2 포스팅' 에서는 GSAP는 움직임을 제어할 수 이벤트 컨트롤링에 대해 알아보았습니다.
이번 포스팅 주제는 스타일 컨트롤하는 방법에 대해서 다루어 보겠습니다.
CSS를 잘 다루는 퍼블리셔라면 이번 주제의 내용을 쉽게 이해하실 수 있으리라 생각됩니다.
또한 Easing 컨트롤에 대해 같이 알아보겠습니다.
CSS Style 트윈 기본 문법
기본적인 문법은 CSS 작성방법과 동일하며, CSS 코드를 모두 사용 가능합니다.
그러나 background-color, margin-top, background-image와 같이 css에 '-' 가 포함되어 있는 문법을 사용해 트윈 스타일을 변경하고자 할 경우에는 카멜 표기법을 사용합니다.
카멜 표기법 사용방법은 '-' 뒤에 영문을 대문자로 작성합니다.
예를 들어 backgroundColor, marginTop, backgroundImage로 작성합니다.
gsap.to('.tweenbox', 3, {width:300, height:300, backgroundColor:'#ccc'});GSAP - CSS Style Control 예제 실습 파일
GSAP 제공하는 Style 트윈 기본 문법
CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.
장점은 CSS Style 보다 코드가 좀 간편합니다.
CSS만 사용해도 무리가 없으나, 더 알고 있다고 나쁜 건 없겠죠?
GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.
| GSAP | CSS |
| x:300 | transform: translateX(300px), margin-left: 300px |
| y:300 | transform: translateY(300px), margin-top: 300px |
| scaleX:2 | transfome: scaleX(2) |
| scaleY:2 | transfome: scaleY(2) |
| rotation:360 | transform: rotate(360deg) |
| rotationX:180 | transform: rotateX(180deg) |
| rotationY:180 | transform: rotateY(180deg) |
| skewY:45 | transform: skewY(45deg) |
| xPercent:45 | transform: translateX(45%) |
| yPercent:45 | transform: translateY(45%) |
GSAP Style Control 작성 문법
gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });GSAP - GSAP Style Control 예제 실습 파일
GSAP Easing
GSAP는 Jquery처럼 easing 함수를 제공합니다.
easing의 function은 애니메이션이 진행됨에 따라 지정한 값의 속도 변화 움직임을 컨트롤하는 설정 값입니다.
그렇기 때문에 움직임을 표현할 때 없어서는 안 될 중요한 요소입니다.
GSAP에서 기본 easeing 값은 Power1.easeOut 입니다.
CDN - Easing 라이브러리 적용방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>GSAP</title>
<!-- CDN GSAP, Easing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/EasePack.min.js"></script>
</head>
<body>
</body>
</html>
Easing 코드 적용방법
TweenMax.staggerFrom('.tweenbox', 1, {
ease: Back.easeOut,
opacity: 0,
y: 200,
delay: 0.5
}, 0.2);GSAP - GSAP Easing Control 예제 실습 파일
Easing의 종류는 GSAP 공식 사이트에서 easing을 종류별 구현하여 확인할 수 있습니다.
또한 예시, 실행을 해보고 easing 코드를 복사하면 쉽게 사용할 수 있습니다.
백 번 설명하여 포스팅하는 것보다는 직접 보시면 이해가 더 빠르리라 생각되어, GSAP 공식 사이트의 easing 메뉴 URL을 아래에 공유해 드립니다.
https://greensock.com/docs/Easing
GSAP Controlling, Easing 마치며...
GSAP Style, Easing Controlling에 대하여 정리해 보았습니다.
이전에 작성한 '기초 2', 이번에 작성한 '기초 3'을 통해 GSAP의 이벤트, 스타일, Easing 컨트롤에 대해 모두 다루어 보았습니다.
이 글을 보신 분들 모두 퍼블리싱하시면서 GSAP 애니메이션을 떡 주무르듯이 컨트롤하실 수 있는 고수가 되실 수 있었으면 합니다.
다음 포스팅은 GSAP eventCallback 함수에 대해 간단하게 알아 보겠습니다.
감사합니다.
'javascript' 카테고리의 다른 글
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화2(곡선 애니메이션) (0) | 2021.10.14 |
|---|---|
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화1(GSAP Callback) (0) | 2021.10.12 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초2(GSAP Controlling) (0) | 2021.10.07 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초1(GSAP 메서드) (0) | 2021.10.01 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기1 - 입문(세팅방법) (0) | 2021.09.28 |
