티스토리 뷰

GSAP

[GSAP] TweenMax.to

TweenMax.to

이동하는 애니메이션입니다.


이동하기

tweenMax를 이용하여 이동하는 애니메이션입니다.

문법(Syntax)

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

1. 이동하기

버튼을 클릭하면 오른쪽으로 이동하는 애니메이션입니다.

JQUERY
$(".start").on("click", function(){
    $(".box1").animate({ left:"80%" }, 1000);
}); 
$(".reset").on("click", function(){
    $(".box1").animate({ left:"0%" }, 0);
});
GSAP
$(".start").on("click",function(){
    TweenMax.to(".box1", 1, { left:"80%" });
});  
$(".reset").on("click",function(){
    TweenMax.to(".box1", 0, { left:"0%" });
});
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
    TweenMax.to('.box1', 1, {left: "80%"});
}
function moveReset(){
    TweenMax.to('.box1', 0, {left: "0%"});
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP</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="start">클릭하면 오른쪽으로 움직입니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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
        // $(".start").on("click", function(){
        //     $(".box1").animate({ left:"80%" }, 1000);
        // }); 
        // $(".reset").on("click", function(){
        //     $(".box1").animate({ left:"0%" }, 0);
        // });

        //gsap
        // $(".start").on("click",function(){
        //     TweenMax.to(".box1", 1, { left:"80%" });
        // });  
        // $(".reset").on("click",function(){
        //     TweenMax.to(".box1", 0, { left:"0%" });
        // });  
    
        //javascript
        const startBtn = document.querySelector('.start');
        const resetBtn = document.querySelector('.reset');

        startBtn.addEventListener('click', moveStart);
        resetBtn.addEventListener('click', moveReset);
        
        function moveStart(){
            TweenMax.to('.box1', 1, {left: "80%"});
        }
        function moveReset(){
            TweenMax.to('.box1', 0, {left: "0%"});
        }
    </script>
</body>
</html>

2. 이동하기

버튼을 클릭하면 한꺼번에 오른쪽으로 이동하는 애니메이션입니다.

JQUERY
$(".choice .start").on("click",function(){
    $(".box1, .box2, .box3").animate({ left:"80%" }, 1000);
}); 
$(".choice .reset").on("click",function(){
    $(".box1, .box2, .box3").animate({ left:"0%" }, 0);
});
GSAP
$(".choice .start").on("click",function(){
    TweenMax.to([".box1, .box2, .box3"], 1, {left:"80%"});
});  
$(".choice .reset").on("click",function(){
    TweenMax.to([".box1, .box2, .box3"], 0, {left:"0%"});
});
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
    TweenMax.to([".box1, .box2, .box3"], 1, {left: "80%"});
}
function moveReset(){
    TweenMax.to([".box1, .box2, .box3"], 0, {left: "0%"});
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP</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 class="box2">box</div>
        <div class="box3">box</div>
    </div>

    <div class="choice">
        <a href="#" class="reset">리셋</a>
        <a href="#" class="start">클릭하면 이동합니다..</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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
        // $(".choice .start").on("click",function(){
        //     $(".box1, .box2, .box3").animate({ left:"80%" }, 1000);
        // }); 
        // $(".choice .reset").on("click",function(){
        //     $(".box1, .box2, .box3").animate({ left:"0%" }, 0);
        // });

        //gsap
        // $(".choice .start").on("click",function(){
        //     TweenMax.to([".box1, .box2, .box3"], 1, {left:"80%"});
        // });  
        // $(".choice .reset").on("click",function(){
        //     TweenMax.to([".box1, .box2, .box3"], 0, {left:"0%"});
        // });  
    
        //javascript
        const startBtn = document.querySelector('.start');
        const resetBtn = document.querySelector('.reset');

        startBtn.addEventListener('click', moveStart);
        resetBtn.addEventListener('click', moveReset);
        
        function moveStart(){
            TweenMax.to([".box1, .box2, .box3"], 1, {left: "80%"});
        }
        function moveReset(){
            TweenMax.to([".box1, .box2, .box3"], 0, {left: "0%"});
        }
    </script>
</body>
</html>

3. 이동하기

버튼을 클릭하면 오른쪽으로 한번씩 이동하는 애니메이션입니다.

JQUERY
$(".start").on("click",function(){
    $(".box1").animate({ left:"+=100" }, 1000);
}); 
$(".reset").on("click",function(){
    $(".box1").animate({ left:"0" }, 0);
});
GSAP
$(".start").on("click",function(){
    TweenMax.to(".box1", 1, { left:"+=100" });
});  
$(".reset").on("click",function(){
    TweenMax.to(".box1", 0, { left:"0" });
});  
JAVASCRIPT
const startBtn = document.querySelector('.start');
const resetBtn = document.querySelector('.reset');

startBtn.addEventListener('click', moveStart);
resetBtn.addEventListener('click', moveReset);

function moveStart(){
    TweenMax.to(".box1", 1, { left:"+=100" });
}
function moveReset(){
    TweenMax.to(".box1", 0, { left:"0" });
}
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>GSAP</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="start">클릭하면 오른쪽으로 움직입니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <script>
        $(".choice a").on("click",function(e){
            e.preventDefault();
        });

        //jquery
        // $(".start").on("click",function(){
        //     $(".box1").animate({ left:"+=100" }, 1000);
        // }); 
        // $(".reset").on("click",function(){
        //     $(".box1").animate({ left:"0" }, 0);
        // });

        //gsap
        // $(".start").on("click",function(){
        //     TweenMax.to(".box1", 1, { left:"+=100" });
        // });  
        // $(".reset").on("click",function(){
        //     TweenMax.to(".box1", 0, { left:"0" });
        // });  
    
        //javascript
        const startBtn = document.querySelector('.start');
        const resetBtn = document.querySelector('.reset');

        startBtn.addEventListener('click', moveStart);
        resetBtn.addEventListener('click', moveReset);
        
        function moveStart(){
            TweenMax.to(".box1", 1, { left:"+=100" });
        }
        function moveReset(){
            TweenMax.to(".box1", 0, { left:"0" });
        }
    </script>
</body>
</html>

공유하기(Share) 더보기

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

공감하기(Like) 더보기

UP NEXT : Ads by Google

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