티스토리 뷰

GSAP

[GSAP] Controlling

Controlling

애니메이션을 컨트롤 할 수 있습니다.


Controlling

애니메이션을 컨트롤 할 수 있습니다.

문법(Syntax)

TweenMax.to("target", duration, vars);

이동하기

애니메이션을 컨트롤 합니다..

JQUERY
//jQuery
GSAP
const tween = TweenMax.to(".box1",10,{left:"90%",borderRadius:"0%",rotation:"720deg"});

$(".btn1").click(function(){tween.play()});
$(".btn2").click(function(){tween.pause()});
$(".btn3").click(function(){tween.resume()});
$(".btn4").click(function(){tween.reverse()});
$(".btn5").click(function(){tween.seek(0.5)});
$(".btn6").click(function(){tween.timeScale(0.5)});
$(".btn7").click(function(){tween.timeScale(2)});
$(".btn8").click(function(){tween.kill()});
$(".btn9").click(function(){tween.restart()});

$(".reset").on("click",function(){
    TweenMax.to(".box1", 0, { left: "0", borderRadius:"50%", rotation:"720deg" });
}); 
JAVASCRIPT
const btn1 = document.querySelector('.btn1');
const btn2 = document.querySelector('.btn2');
const btn3 = document.querySelector('.btn3');
const btn4 = document.querySelector('.btn4');
const btn5 = document.querySelector('.btn5');
const btn6 = document.querySelector('.btn6');
const btn7 = document.querySelector('.btn7');
const btn8 = document.querySelector('.btn8');
const btn9 = document.querySelector('.btn9');
const resetBtn = document.querySelector('.reset');
const tween = TweenMax.to( ".box1", 10, { left:"90%", borderRadius:"0%", rotation:"720deg" });

btn1.addEventListener('click', play);
btn2.addEventListener('click', pause);
btn3.addEventListener('click', resume);
btn4.addEventListener('click', reverse);
btn5.addEventListener('click', seek);
btn6.addEventListener('click', timeScale);
btn7.addEventListener('click', timeScale2);
btn8.addEventListener('click', kill);
btn9.addEventListener('click', restart);
resetBtn.addEventListener('click', moveReset);

function play(){
    tween.play();
}
function pause(){
    tween.pause();
}
function resume(){
    tween.resume();
}
function reverse(){
    tween.reverse();
}
function seek(){
    tween.seek(0.5);
}
function timeScale(){
    tween.timeScale(0.5);
}
function timeScale2(){
    tween.timeScale(2);
}
function kill(){
    tween.kill();
}
function restart(){
    tween.restart();
}
function moveReset(){
    TweenMax.to(".box1", 0, { left: "0", borderRadius:"50%", rotation:"720deg" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP Controlling</title>
    <style>
        .box_wrap {width: 100%;}
        .box_wrap div {
            display: block; width: 60px; height: 60px; line-height: 65px; text-align: center; 
            border-radius: 50%; overflow: hidden; position: relative; font-size: 12px;
            color: #fff; margin: 4px;
            background-image: linear-gradient(45deg, #fbc2eb 0%, #a6c1ee 100%);
        }
    </style>
</head>
<body>
    <div class="box_wrap">
        <div class="box1">box</div>
    </div>

    <div class="choice">
        <a href="#" class="reset">리셋</a>
        <a href="#" class="btn1">play</a>
        <a href="#" class="btn2">pause</a>
        <a href="#" class="btn3">resume</a>
        <a href="#" class="btn4">reverse</a>
        <a href="#" class="btn5">seek(0.5)</a>
        <a href="#" class="btn6">timeScale(0.5)</a>
        <a href="#" class="btn7">timeScale(2)</a>
        <a href="#" class="btn8">kill()</a>
        <a href="#" class="btn9">restart()</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <script>
        $("a").on("click",function(e){
            e.preventDefault();
        });

        //jquery

        //gsap
		// const tween = TweenMax.to(".box1",10,{left:"90%",borderRadius:"0%",rotation:"720deg"});

        // $(".btn1").click(function(){tween.play()});
        // $(".btn2").click(function(){tween.pause()});
        // $(".btn3").click(function(){tween.resume()});
        // $(".btn4").click(function(){tween.reverse()});
        // $(".btn5").click(function(){tween.seek(0.5)});
        // $(".btn6").click(function(){tween.timeScale(0.5)});
        // $(".btn7").click(function(){tween.timeScale(2)});
        // $(".btn8").click(function(){tween.kill()});
        // $(".btn9").click(function(){tween.restart()});
        
        // $(".reset").on("click",function(){
        //     TweenMax.to(".box1", 0, { left: "0", borderRadius:"50%", rotation:"720deg" });
        // }); 
    
        //javascript
        const btn1 = document.querySelector('.btn1');
        const btn2 = document.querySelector('.btn2');
        const btn3 = document.querySelector('.btn3');
        const btn4 = document.querySelector('.btn4');
        const btn5 = document.querySelector('.btn5');
        const btn6 = document.querySelector('.btn6');
        const btn7 = document.querySelector('.btn7');
        const btn8 = document.querySelector('.btn8');
        const btn9 = document.querySelector('.btn9');
        const resetBtn = document.querySelector('.reset');
        const tween = TweenMax.to( ".box1", 10, { left:"90%", borderRadius:"0%", rotation:"720deg" });

        btn1.addEventListener('click', play);
        btn2.addEventListener('click', pause);
        btn3.addEventListener('click', resume);
        btn4.addEventListener('click', reverse);
        btn5.addEventListener('click', seek);
        btn6.addEventListener('click', timeScale);
        btn7.addEventListener('click', timeScale2);
        btn8.addEventListener('click', kill);
        btn9.addEventListener('click', restart);
        resetBtn.addEventListener('click', moveReset);
        
        function play(){
            tween.play();
        }
        function pause(){
            tween.pause();
        }
        function resume(){
            tween.resume();
        }
        function reverse(){
            tween.reverse();
        }
        function seek(){
            tween.seek(0.5);
        }
        function timeScale(){
            tween.timeScale(0.5);
        }
        function timeScale2(){
            tween.timeScale(2);
        }
        function kill(){
            tween.kill();
        }
        function restart(){
            tween.restart();
        }
        function moveReset(){
            TweenMax.to(".box1", 0, { left: "0", borderRadius:"50%", rotation:"720deg" });
        }
    </script>
</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼