반응형

 

 

TweenMax 곡선ㆍ라운드 애니메이션

 

프로젝트 퍼블리싱을 하다 보면, 디자이너 작업자들이 문의를 합니다.

 

혹시 곡선 형태의 애니메이션 처리 작업이 가능한가요?

퍼블리셔 : 음....

퍼블리셔 : 가능하지만 스크립트로 처리해야하고 0.0.1초 단위로 '가로 1px, 세로 1px씩 변할 때마다 엘리먼트의 좌표를 바꿔줘야 하고너무 복잡....블라 블라

 

 

디자이너 : 쉽게 말해주세요.

퍼블리셔 : 프로젝트 시간도 부족하고 해서 하기 힘들 것 같습니다.

디자이너 : 네ㅜㅜ

 

 

대부분의 곡선 애니메이션 구현을 요청하면 대부분의 퍼블리셔들은 이렇게 대답을 할 것 같습니다.

하지만 GSAP의 곡선을 처리하는 bezier 속성을 알게 된다면, 간편하게 곡선 애니메이션(라운드 움직임)의 효과를 만들 수 있습니다.

자바스크립트나 jQuery로는 구현할 수 없는 신세계??

그럼 바로 bezier curve에 대해서 알아보겠습니다.

이것을 알게되는 순간 퍼블리셔로써 큰 무기를 가지게 되는 것입니다.

 

 

 

 

 

bezier : Array

 

Target 객체를 정해진 좌표까지 이동을 직선으로 하는 것이 아닌 부드러운 곡선으로 이동합니다.

코드 작성 기본 규칙

GSAP 라이브러리로는 bezier curve 곡선을 사용할 수 없습니다. 

bezier 속성을 사용하기 위해서는 GSAP의 TweenMax 라이브러리를 사용해야 합니다.

저는 프로젝트 작업 시 GSAP 라이브러리보다는 TweenMax 라이브러리를 통합으로 사용합니다. 

왜냐하면TweenMax 라이브러리에서는 GSAP 라이브러리가 가지고 있는 기능들을 모두 사용 가능합니다.

 

TweenMax library CDN : https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

 

 

bezier 코드는 CSS의 position 속성이 없다면 사용 불가능합니다. 그러나 애니메이션 키값을 'top', 'left'가 아닌 'x', 'y' 키값으로 좌표값을 작성하여 트윈 한다면 CSS position 속성 없이 애니메이션이 가능합니다.

 

 bezier 속성 안에 ease, repeat, yoyo 등의 gsap 속성을 사용할 수 있습니다. ease, repeat, yoyo 속성은 기초 1~3편 포스팅에서 작성했습니다. 기억나지 않으시면 다시 한번 보시길 추천드립니다.  

 

 

 

 

 

bezier 속성인 curviness, autoRotate, type 속성을 이용한 bezier 곡선

 

curviness : 커브의 강도를 나타냅니다. 키값이 크면 클수록 역동적으로 애니메이션 됩니다.

 

autoRotate : true를 키값으로 주면  진행방향이 '곡선의 움직임 방향'으로 엘리먼트가 틀어져 애니메이션이 발생하며, false를 키값으로 주면 진행방향과 상관없이 target 모습 그대로 틀어짐 없이 애니메이션 됩니다.

 

type : 기본값은 "thru"이며 "soft", "quadratic", "cubic" 4가지입니다. 첨부해드리는 예제를 통해서 보시면 차이를 알 수 있습니다.

 

 

좌표 키값과,  기본 GSAP 속성을 사용한 bezier 곡선

  TweenMax - bezier base 예제 실습 파일  

gsap_bezier_base.zip
0.03MB

 

 

 

 

curviness, autoRotate 속성 값을 적용한 bezier 곡선

  TweenMax - bezier curviness, autoRotate 예제 실습 파일  

gsap_bezier_autoRotate.zip
0.03MB

 

 

 

 

type 속성 값을 적용한 bezier 곡선

  TweenMax - bezier type 예제 실습 파일  

gsap_bezier_type.zip
0.03MB

 

 

 

 

 

bezier 마치며...

 

GSAP bezier 곡선 움직임(애니메이션)에 대하여 모두 알아보았습니다.

코드 작성이 자바스크립트나, jQuery 작성이 직관적이고 쉽게 곡선 애니메이션을 만들 수 있다는 것을 보셨죠?

이것을 끝으로 GSAPㆍTweenMax 라이브러리 포스팅을 마무리하고자 합니다.

GSAP 설치방법부터 기초, 심화과정의 세분화 과정을 통해 여러 편에 걸쳐 포스팅하였습니다.

GSAP 라이브러리 포스팅을 시작할 때 정리해야 할 내용들이 많아서 걱정이 많이 됐는데, 완전히 끝나고 나니 시원 섭섭하네요!

GSAPㆍTweenMax 라이브러리 포스팅 전편이 퍼블리싱하는데 길잡이가 되길 바라며, 마무리하겠습니다.

감사합니다.

 

반응형
반응형

 

 

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.css.style.zip
0.03MB

 

 

 

 

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_gsap.css.zip
0.03MB

 

 

 

 

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 예제 실습 파일  

gsap_easing.zip
0.03MB

 

 

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 함수에 대해 간단하게 알아 보겠습니다.

감사합니다.

 

 

 

반응형
반응형

 

 

GSAP Variables (트윈 제어 - Tween Controlling )

 

GSAP는 움직임을 제어할 수 있는 메서드를 제공합니다.

이번 포스팅에서는 repeat(), repeatDelay(), delay(), yoyo(), start(), resume(), restart(), reverse(), isActive(), pause(), seek(), timeScale() 에 대해 예제와 설명을 통해 알아가 보겠습니다. 

 

 

 

 

repeat(number)

 

애니메이션(트윈이라 정의) 반복 횟수 설정합니다.

기본값은 1이며, -1을 설정하면 무한반복됩니다. delay가 포함되어 있는 경우 첫 번째 트윈만 delay가 적용되고, repeat가 반복 실행되는 두 번째부터는 delay가 적용되지 않습니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeat() 예제 실습 파일  

gsap.repeat().zip
0.03MB

 

 

 

 

repeatDelay(number)

 

트윈 반복 시  지연 시간을 초 단위로 설정합니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	gsap.to('.tweenbox', 3, {
		marginTop: 300,
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: 3 //repeat 값이 -1 일 경우 무한 반복
		repeatDelay: 2 // 반복 지연시간 설정(초 단위)
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.repeatDelay() 예제 실습 파일  

gsap.repeatDelay().zip
0.03MB

 

 

 

 

delay(number)

 

트윈 지연 시간을 초 단위로 설정합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	justify-content:center;
	padding:200px 0;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	$('.btn').click(function(){
		gsap.fromTo('.tweenbox', 1.5, { scaleX:1, scaleY:1, rotation:0, delay: 0 }, {scaleX:2, scaleY:2, rotation:180, delay: .5 });
	});
});

//HTML
<a href="#none" class="btn">Toggle Tween Delay</a>
<div class="content">
	<div class="tweenbox"></div>
</div>

  gsap.delay() 예제 실습 파일  

gsap.delay().zip
0.03MB

 

 

 

 

yoyo(Boolean)

 

트윈을 앞뒤로 반복하여 실행합니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
$(function(){
	TweenMax.to('.tweenbox', 3, {
		marginLeft: 300,
		backgroundColor: '#ccc',
		border: '2px solid #222',
		borderRadius: 30,
		repeat: -1, //repeat 값이 -1 일 경우 무한 반복
		yoyo: true // 애니메이션을 앞뒤로 반복하여 실행 시킴 - yoyo: Boolean 
	});
});

//HTML
<div class="tweenbox"></div>

  gsap.yoyo() 예제 실습 파일  

gsap.yoyo().zip
0.03MB

 

 

 

 

pause( ), resume( ), restart( )

 

  pause( )   - 트윈의 현재 위치에서 일시 중지하는 설정합니다.

  resume( )   - 방향을 바꾸지 않고 현재 위치에서 트윈을 재시작하는 설정합니다.

  restart( )   - 트윈을 처음부터 다시 시작하는 설정합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = TweenMax.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:500, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenPause(){
	tweenBox.pause();   //멈춤
}

function tweenResume(){
	tweenBox.resume();  //재시작
}

function tweenRestart(){
	tweenBox.restart(); //처음부터 다시시작
}


//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenPause();" class="btn">Pause()</a>
<a href="javascript:tweenResume();" class="btn">Resume()</a>
<a href="javascript:tweenRestart();" class="btn">Restart()</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  pause(), resume(), restart() 예제 실습 파일  

start(),restart(),resume(),pause().zip
0.03MB

 

 

 

 

reverse( )

 

트윈 재생을 역방향으로 설정 합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox1");
	tweenBox = gsap.fromTo(motionBox, 2, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30})
}

function tweenReverse(){
	tweenBox.reverse();   //역방향으로 진행
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenReverse();" class="btn">Reverse()</a>
<div class="content">
    <div id="tweenBox1" class="tweenbox"></div>
</div>

  reverse() 예제 실습 파일  

reverse().zip
0.03MB

 

 

 

 

isActive( )

 

트윈의 활성화 여부를 나타냅니다.

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}
button {margin:10px}

//JS
$(function(){
	var tween = gsap.to('.tweenbox', 2, {
		x: 300, 
		backgroundColor: '#ccc', 
		border: '2px solid #222', 
		borderRadius: 30,
		reversed: true //reversed() : 애니메이션의 역방향에 대한 여부 및 설정
	});

	$('#tweenBox').click(function(){
		if(!tween.isActive()){  //isActive() : 애니메이션 활성화 여부
			tween.reversed() ? tween.play() : tween.reverse();  //삼항연산자 :  조건 ? ture : false
		}
	});
});

//HTML
<div class="tweenbox"></div>
<button id="tweenBox">Toggle Tween Reverse</button>

  isActive() 예제 실습 파일  

isActive().zip
0.03MB

 

 

 

 

seek(number)

 

트윈을 지정한 위치로 이동 설정 합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenSeek(){
	tweenBox.seek(3);   //지정한 위치로 이동(3초 위치로)
}

//HTML
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  seek() 예제 실습 파일  

seek().zip
0.03MB

 

 

 

 

timeScale(number)

 

트윈의 속도 증가와 감속을 설정합니다.

기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가합니다.

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	display:flex;
	padding:100px 30px;
	border:1px solid #000
}
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
var tweenBox;

function tweenStart(){
	var motionBox = document.getElementById("tweenBox");
	tweenBox = gsap.fromTo(motionBox, 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:700, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});
}

function tweenTimescale(){
	tweenBox.timeScale(0.5); //배율, 속도 감소(0.5는 최초 속도의 절반 느려짐 의미함) / timeScale(2) - 속도가 2배 빨라짐 
}

//HTML
<a href="javascript:tweenStart();" class="btn">Start</a>
<a href="javascript:tweenTimescale();" class="btn">Timescale(0.5)</a>
<div class="content">
    <div id="tweenBox" class="tweenbox"></div>
</div>

  timeScale() 예제 실습 파일  

timeScale().zip
0.03MB

 

 

 

 

GSAP Controlling을 마치며...

 

이번 포스팅은 트윈 컨트롤 중  이벤트 발생 시 트윈 컨트롤에 대해 주로 알아보았습니다.

GSAP 트윈 컨트롤 포스팅해드린 내용만 완벽하게 숙지하신다면, 웹퍼블리싱(이벤트 발생 시트 윈 컨트롤 ) 하는데 문제가 없으리라 생각됩니다.

다음 편에는 트윈 컨트롤 중 style 컨트롤에 대해서 포스팅 하고자 합니다.

퍼블리셔가 해야 할 공부가 너무 많죠??

다들 힘내서 퍼블리싱 합시다!!  파이팅!!!!!!

 

반응형
반응형

 

 

GSAP 트윈 기본 문법

 

GSAP는 자바스크립트 객체의 숫자형 속성을 통해 애니메이션(앞으로 이것을 '트윈'이라 정의합니다.)을 실행합니다.

예를 들어, 특정 속성의 값을 3초 동안 모서리에 라운드 트윈을 주는 기본 문법 코드는 다음과 같습니다.

 

gsap.to('.tweenbox', 3, {borderRadius: 30});

 

첫 번째 파라미터 값은 트윈 할 목표 대상(Target), 두 번째 파라미터 값은 지속시간(Duration), 세 번째 파라미터 값은 트윈 할 목표 대상(Target)의 변화된 다른 속성(Properties) 값으로 변화가 발생하면서, 트윈이 표현됩니다. 

 

GSAP 메서드 설명에 앞서서 기본 문법에 설명드렸습니다.

지금부터는 기본 메서드인 .to(), .from(),  fromTo(), staggerTo(), staggerFrom(), TimelineMax()에 대해서 다루겠습니다.

 

 

 

 

gsap.to( )

 

this(Target) 속성에서 지정한 속성까지 트윈

 

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.to('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.to() 예제 실습 파일  

gsap.to().zip
0.03MB

 

 

 

 

gsap.from( )

 

지정한 속성에서 this(Target) 속성까지 트윈 

 

//CSS
.tweenbox {
	width:100px;
 	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.from('.tweenbox', 3, {
	marginLeft: 300,
	backgroundColor: '#ccc',
	border: '2px solid #222',
	borderRadius: 30
});

  gsap.from() 예제 실습 파일  

gsap.from().zip
0.03MB

 

 

 

 

gsap.fromTo( )

 

from에서 지정된 값에서 to가 지정된 값으로 트윈

gsap.fromTo(target, duration, {from vars}, {to vars});

 

//CSS
.tweenbox {
	width:100px;
	height:100px;
	border:2px solid crimson;
	background:lightcoral;
	box-sizing:border-box
}

//JS
gsap.fromTo('.tweenbox', 5, { x:0, backgroundColor:'lightcoral', border:'2px solid crimson'}, {x:300, backgroundColor:'#ccc', border:'2px solid #222', borderRadius:30});

  gsap.fromTo() 예제 실습 파일  

gsap.fromTo().zip
0.03MB

 

 

 

 

TweenMax.staggerTo( )

 

TweenMax.staggerTo(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

 

여러 개의 배열(Array)인 this(Target) 속성을  순차적(시간 차)으로 지정한 속성까지 트윈 합니다.

stagger 메서드는 공식 문법이 gsap로 바뀌기 이전 버전(2.1.3 - Version)인 TweenMax 였을 때 존재했던 메서드이지만 gsap로 공식 문법(3.0.0 - Version)이 변경되고, TimelineMax 하나의 메서드로 통일된 것 같습니다.

 

stagger(Target 배열) : 각 배열 트윈 사이의 모션 실행,  TimelineMax(트윈 배열) : this(Target) 트윈이 종료 후 모션 실행합니다.

이렇듯 엄연히 두 개의 메서드는 결이 다른데 왜 없어졌는지 모르겠습니다. 

개인적으로 저는 stagger 메서드를 더 선호합니다.

그러나 현재 최신 버전에서도 하위 버전을 지원하므로 TweenMax.staggerTo() 사용 가능합니다.

 

gsap를 몇 년 전부터 미리 알지 못했다면, 이렇게 좋은 메서드를 사용하지 못했을 메서드가 될 뻔했습니다.

 

 

 

//CSS
.btn {
	display:inline-block;
	padding:5px 10px 6px;
	background-color:#333;
	font-size:13px;
	color:#fff;
	text-decoration:none
}
.content {
	padding:100px 30px;
	border:1px solid #000
}
ul {display:flex}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
function tweenStaggerTo(){
	var m0 = document.getElementById("e0");
	var m1 = document.getElementById("e1");
	var m2 = document.getElementById("e2");
	var m3 = document.getElementById("e3");
	var m4 = document.getElementById("e4");
	TweenMax.staggerTo([m0, m1, m2, m3, m4], 1, { rotation:180 }, 0.5);	//TweenMax.staggerTo([객체1, 객체2, 객체3], 시간, {트윈 모션}, 모션 사이의 딜레이 시간);
}

//HTML
<a href="javascript:tweenStaggerTo();" class="btn">Start</a>
<div class="content">
	<ul>
		<li id="e0" class="tweenbox">1</li>
		<li id="e1" class="tweenbox">2</li>
		<li id="e2" class="tweenbox">3</li>
		<li id="e3" class="tweenbox">4</li>
		<li id="e4" class="tweenbox">5</li>
	</ul>
</div>

  TweenMax.staggerTo() 예제 실습 파일  

TweenMax.staggerTo().zip
0.03MB

 

 

 

 

TweenMax.staggerFrom( )

 

여러 개의 배열(Array)을 지정한 속성에서 this(Target) 속성까지  순차적(시간 차)으로  트윈 합니다.

TweenMax.staggerFrom(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

 

//CSS
ul {
	display:flex;
	justify-content:center;
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	list-style:none
}

//JS
TweenMax.staggerFrom('.tweenbox', 1, {
	ease: Back.easeOut,
	opacity: 0,
	y: 200,
	delay: 0.5
}, 0.2);

//HTML
<ul>
	<li class="tweenbox">1</li>
	<li class="tweenbox">2</li>
	<li class="tweenbox">3</li>
	<li class="tweenbox">4</li>
	<li class="tweenbox">5</li>
</ul>

  TweenMax.staggerFrom() 예제 실습 파일  

TweenMax.staggerfrom().zip
0.03MB

 

 

 

 

TimelineMax( )

 

this(Target) 하나의 객체를 순차적으로 트윈 하는 타임라인  문법입니다. 

gsap.to()가 연달아 있는 코드와 비슷합니다.

 

//CSS
ul {
	display:flex;
	justify-content:center
}
li.tweenbox {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100px;
	height:100px;
	margin:20px;
	background:lightcoral;
	border-radius:10px;
	color:#fff;
	list-style:none
}

//JS
var timeLine = new TimelineMax();
timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' })
	.to('.tweenbox', 1, { backgroundColor: 'cyan' })
	.to('.tweenbox', 1, { backgroundColor: '#ccc' });
        
//HTML
<ul>
	<li class="tweenbox">1</li>
</ul>

  TimelineMax() 예제 실습 파일  

TimelineMax().zip
0.03MB

 

 

 

 

GSAP 메서드(기초) 마치며...

 

GSAP 메서드는 이정도만 숙지하고 계셔도 동적인 화면을 만드실 때 문제가 없으시리 생각됩니다.

제가 포스팅한 GSAP 메서드(기초)편이 퍼블리싱하는데 도움이 되었으면 합니다.

다음 포스팅은 GSAP VARIABLES 대해서 알아 보겠습니다.

VARIABLES는 알아야 할 것들이 많기 때문에 2~3편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

 

반응형
반응형
프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 
애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까?
바로~~ 바로!!!
트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.

 

 

 

 

GSAP

 

GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.

GSAP는 CSS의 keyframeanimation 보다 더 정밀한 컨트롤을 할 수 있습니다. 

또한 GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋습니다.

이번 가이드에서는 GSAP세팅방법기본문법에 대해서 알아볼 것입니다.

 

 

 

 

Get GSAP (Installation)

 

코드를 작성하기 전에, HTML 파일에 GSAP 라이브러리를 추가해야 합니다.

CDN을 이용하여 추가해도 되고 파일을 다운로드하여 추가해도 됩니다.

당연히 NPM으로 설치도 가능합니다.

 

CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

Download 방법 : https://greensock.com/docs/v3/Installation/#download

NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>		
    
	<!-- local(download file) -->
	<script src="js/gsap.min.js"></script>
</head>
<body>

</body>
</html>

 

 

 

 

기본 문법

 

gsap.to(target:Object, duration:Number, {variables:Object});

.to()는 일반적으로  제이쿼리의 .animate()라고 생각하면 됩니다.


target : Object - 대상 오브젝트(인자)

duration : Number - 애니메이션 지속 시간 /(초)

variables : Object - target에 부여할 키 값

 

 

  문법 작성 기본규칙  

 

Ⅰ. CSS  키값은 동일하지만 border-radius, border-right 와 같이 '-' 문자가 들어가 있을 경우 카멜 표기법을 사용하면 됩니다. (EX : borderRadius, borderRight)

Ⅱ. target은 유연하게 사용 가능하기 때문에 제이쿼리 형태로 사용해도 되고 아니어도 됩니다. (EX : $(".tweenbox") , .tweenbox, 변수명 

 

 

 

 

입문 가이드 마치며...

 

다음 포스팅은 GSAP의 메서드와 VARIABLES에 대해서 가이드할 계획입니다.

이번 입문 가이드에 대해서 이해 못하셔도 됩니다. 다음 포스팅에서는 예제를 작성하여 설명할 예정이니까요!!

좀 더 쉽겠죠??

저만의 생각은 아니겠죠??

제가 작성하고 공유하는 가이드가 웹퍼블리싱 하는데 도움이 되었으면 합니다.

 

반응형

+ Recent posts