반응형

 

 

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 Callback (트윈 제어 - 콜백 함수)

 

callback은 이벤트에 전달해주는 콜백 함수입니다.

GSAP는 함수를 호출하고 파라미터를 넘기는 과정을 편하게 제어할 수 있습니다.

GSAP 콜백 함수는 onInit, onStart, onComplete, onUpdate, onRepeat, onReverseComplete 가 있습니다.

이번 포스팅에서는 위 콜백 함수에 대해 알아보고자 하며, 예제는 자주 사용하는 콜백 함수 위주로 작성할 것이며,

사용빈도가 낮은 콜백 함수는 간단하게 설명 위주로 포스팅하고자 합니다.

 

 

 

 

onInit

 

애니메이션(Tween)이 시작되기 바로 전에 함수를 호출합니다.

onStart와 별 차이가 없지만, 당연히 onStart 보다 빨리 호출됩니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onInit</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onInit: motionOnit
            });

            function motionOnit() {
                alert('GSAP Tween 콜백함수 시작 전'); //Tween이 시작되기 바로 전에 호출
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onInit 예제 실습 파일  

gsap.onInit.zip
0.03MB

 

 

 

 

onStart

 

애니메이션(Tween)이 시작할 때 함수를 호출합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onStart</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionStart
            });

            function motionStart() {
                alert('GSAP Tween 콜백함수 시작'); //Tween이 시작
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>

  GSAP - onStart 예제 실습 파일  

gsap.onStart.zip
0.03MB

 

 

 

 

onComplete

 

애니메이션(Tween)이 종료되었을 때 함수를 호출합니다.

퍼블리셔가 프로젝트 퍼블리싱 작업 시 GSAP 콜백 함수 중 가장 사용빈도가 높습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onComplete: motionOncomplete
            });

            function motionOncomplete() {
                alert('GSAP Tween 콜백함수 종료');
                gsap.to('.tweenbox', 3, {
                    marginLeft: 0,
                    backgroundColor: 'lightcoral',
                    border: '2px solid crimson',
                    borderRadius: 0
                }); 
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
    </style>
</head>
<body>
    <div class="tweenbox"></div>
</body>
</html>

  GSAP - onComplete 예제 실습 파일  

gsap.onComplete.zip
0.03MB

 

 

 

 

Event(함수) + Params

 

애니메이션(Tween) 중 호출하고자 하는 함수 뒤에 Params 파라미터를 붙여 줄 수 있습니다.

 

 

코드 문법 규칙 

Ⅰ. 배열의 형태로 값을 넘겨주어야 합니다.

Ⅱ.  자기 자신의 값을 넘겨줄 때에는 "{self}"라고 값을 주어야 합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>GSAP - onComplete</title>
    <script src="js/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <script>
        $(function(){
            var outText = document.querySelector(".motion-message");
            gsap.to('.tweenbox', 3, {
                marginLeft: 300,
                backgroundColor: '#ccc',
                border: '2px solid #222',
                borderRadius: 30,
                onStart: motionMessage,
                onStartParams: ['GSAP Tween 콜백함수 시작 메시지','START'],
                onComplete: motionMessage,
                onCompleteParams: ['GSAP Tween 콜백함수 종료 메시지', 'END']
            });

            function motionMessage(message1, message2) {
                outText.innerHTML += message1 + '-' + message2 + '<br>';
            }
        });
    </script>
    <style>
        .tweenbox {width:100px;height:100px;border:2px solid crimson;background:lightcoral;box-sizing:border-box}	
        .motion-message{margin:30px 10px}
    </style>
</head>
<body>
    <div class="tweenbox"></div>
    <div class="motion-message"></div>
</body>
</html>

  GSAP - params 예제 실습 파일  

gsap.params.zip
0.03MB

 

 

 

 

onUpdate

 

애니메이션(Tween)이 계속 진행되는 동안 호출합니다.

해당 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

 

 

 

 

onRepeat

 

애니메이션(Tween)이 반복될 때마다 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백 함수 설명으로 대신합니다. 

 

 

 

 

onReverseComplete

 

애니메이션(Tween)이 반전(Reverse) 된 후 모션이 완료되었을 때 호출합니다.

해당 콜백 함수는 사용빈도가 낮으므로, 예제는 만들지 않고 위에 콜백함수 설명으로 대신합니다. 

 

 

 

 

GSAP Callback(콜백 함수) 마치며...

 

포스팅했던 GSAP 기초 1~기초 3까지 내용을 모두 학습하셨다면, 웹퍼블싱 하면서 동적인 화면 구현의 프로젝트는 충분히 수행 가능하리라 생각됩니다.

하지만 퍼블리셔로서 발전하고 싶은 욕구를 만족시키기 위해 콜백 함수까지 알고 있다면 더욱 좋다고 생각합니다.

가끔 프로젝트 작업 시 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편의 글을 작성하고자 계획 중입니다.

기대해 주세요!!!

 

반응형

+ Recent posts