반응형

 

 

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편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

 

반응형

+ Recent posts