반응형

 

 

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) 심화 마지막 편으로 곡선 방향의 애니메이션을 하는 방법을 알아보겠습니다.

감사합니다.

 

반응형

+ Recent posts