Background Reference v1.0 </doc>

gsap

웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립 라이브러리입니다. 기존 CSS,jQuery Animation보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화된 애니메이션 전용 라이브러리입니다.

이동하기

animate Start

$(".btn1").click(function(){
    // $(".box1> div").animate({left:"90%"},1000);
    gsap.to(".box1 .circle1", 1, {left:"90%"})
    gsap.to(".box1 .circle2", 1, {left:"90%",borderRadius:"0%"})
    gsap.to(".box1 .circle3", 1, {left:"90%",rotationY:"300deg"});
    gsap.to(".box1 .circle4", 1, {left:"90%",rotationX:"700deg"});
    gsap.to(".box1 .circle5", 1, {left:"90%",backgroundImage: "linear-gradient(to top, #a8edea 0%, #fed6e3 100%)"});
    gsap.to(".box1 .circle6", 1, {left:"90%",scale:"3",rotationY:"300deg"});
    gsap.to(".box1 .circle7", 1, {left:"90%",scale:"3",rotation:"300deg"});
    gsap.to(".box1 .circle8", 1, {left:"90%",scale:"0.5",rotation:"1300deg"});
    gsap.to(".box1 .circle9", 1, {left:"90%",scale:"0",rotation:"300deg"});
    gsap.to(".box1 .circle10", 1, {left:"90%",skew:"30deg"});
});

이동하기 (from)

animate Start

$(".btn2").click(function(){
    gsap.from(".box2 .circle1", 1, {left:"90%"})
    gsap.from(".box2 .circle2", 1, {left:"90%",borderRadius:"0%"})
    gsap.from(".box2 .circle3", 1, {left:"90%",rotationY:"300deg"});
    gsap.from(".box2 .circle4", 1, {left:"90%",rotationX:"700deg"});
    gsap.from(".box2 .circle5", 1, {left:"90%",backgroundImage: "linear-gradient(to top, #a8edea 0%, #fed6e3 100%)"});
    gsap.from(".box2 .circle6", 1, {left:"90%",scale:"3",rotationY:"300deg"});
    gsap.from(".box2 .circle7", 1, {left:"90%",scale:"3",rotation:"300deg"});
    gsap.from(".box2 .circle8", 1, {left:"90%",scale:"0.5",rotation:"1300deg"});
    gsap.from(".box2 .circle9", 1, {left:"90%",scale:"0",rotation:"300deg"});
    gsap.from(".box2 .circle10", 1, {left:"90%",skew:"30deg"});
});

이동하기 (ease)

animate Start

$(".btn3").click(function(){
    gsap.to(".box3 .circle1", {duration: 2, left:"90%", rotationY: "300deg", ease: "power1.out"})
    gsap.to(".box3 .circle2", {duration: 2, left:"90%", rotationY: "310deg", ease: "power2.out"})
    gsap.to(".box3 .circle3", {duration: 2, left:"90%", rotationY: "320deg", ease: "power3.out"});
    gsap.to(".box3 .circle4", {duration: 2, left:"90%", rotationY: "330deg", ease: "power4.out"});
    gsap.to(".box3 .circle5", {duration: 2, left:"90%", rotationY: "340deg", ease: "back.out(1.7)"});
    gsap.to(".box3 .circle6", {duration: 2, left:"90%", rotationY: "350deg", ease: "elastic.out(1, 0.3)"});
    gsap.to(".box3 .circle7", {duration: 2, left:"90%", rotationY: "360deg", ease: "bounce.out"});
    gsap.to(".box3 .circle8", {duration: 2, left:"90%", rotationY: "370deg", ease: "slow(0.7, 0.7, false"});
    gsap.to(".box3 .circle9", {duration: 2, left:"90%", rotationY: "380deg", ease: "steps(12)"});
});

반복하기

animate Start

$(".btn4").click(function(){
    gsap.to(".box4 .circle1", {duration: 1, repeat:1, yoyo: true, left:"90%", rotation:"720deg", ease:"power4.out"})
    gsap.to(".box4 .circle2", {duration: 1, repeat:2, yoyo: true, left:"90%", rotation:"720deg", ease:"power4.out"})
    gsap.to(".box4 .circle3", {duration: 1, repeat:3, yoyo: true, left:"90%", rotation:"720deg", ease:"power4.out"})
    gsap.to(".box4 .circle4", {duration: 1, repeat:4, yoyo: true, left:"90%", rotation:"720deg", ease:"power4.out"})
    gsap.to(".box4 .circle5", {duration: 1, repeat:-1, yoyo: true, left:"90%", rotation:"720deg", ease:"power4.out"})
})

Timeline

animate Start

$(".box5").css("height","400px");
$(".btn5").click(function(){
    let tl = new TimelineMax();
    tl.to(".box5 .circle1",{duration: 1, left: "90%", scale:"1", ease: "power2.out"})
        .to(".box5 .circle1",{duration: 1, top: "80%",  scale:"0.5", ease: "power2.out"})
        .to(".box5 .circle1",{duration: 1, left: "0",  scale:"2.5", ease: "power2.out"})
        .to(".box5 .circle1",{duration: 1, top: "0",  scale:"1", ease: "power2.out"})
})

Controlling

animate play pause resume reverse seek(0.5) timeScale(0.5) timeScale(2) kill restart()

const tw = gsap.to(".box6 .circle1", {duration: 1, left: "90%", borderRadius: "0%", rotation: "720deg" })
tw.pause();

$(".btn6").click(function(){
    gsap.to(".box6 .circle1", {duration: 1, left: "90%", borderRadius: "0%", rotation: "720deg" })
});
$(".btn6-1").click(function(){ tw.play()});
$(".btn6-2").click(function(){ tw.pause()});
$(".btn6-3").click(function(){ tw.repeat()});
$(".btn6-4").click(function(){ tw.reverse()});
$(".btn6-5").click(function(){ tw.seek(0.5)});
$(".btn6-6").click(function(){ tw.timeScale(0.5)});
$(".btn6-7").click(function(){ tw.timeScale(2)});
$(".btn6-8").click(function(){ tw.kill()});
$(".btn6-9").click(function(){ tw.repeat()});

Controlling

• onComplete : 애니메이션이 완료되었을 때
• onStart : 애니메이션이 시작할 때
• onUpdate : 애니메이션이 업데이트 될 때마다
• onRepeat : 애니메이션이 반복될 때
• onRepeatComplete : 애니메이션이 리버스 되고 완료되었을 때

animate jquery gsap

$(".btn7-1").click(function(){
    $(".btn7 .circle1").animate({ left: "90%"}, 1000, function(){
        $(".btn7 .circle1").animate({ left: "0"}, 1000)
    });
});

$(".btn7-2").click(function(){
    gsap.to(".box7 .circle1",{duration:1, left: "90%", onComplete: com})
});

function com(){
    gsap.to(".box7 .circle1",{duration:1, left: "0"})
}

Gsap Animation1

See the Pen Gsap Animation1 by miki5237 (@miki5237) on CodePen.

Gsap Animation2

See the Pen Gsap Animation2 by miki5237 (@miki5237) on CodePen.