본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/GSAP

(14)
[GSAP] 샘플 샘플 GSAP GSAP GSAP 속성 설명 gsap.config()
[GSAP] 인덱스 GSAP GSAP GSAP GSAP 속성 설명 gsap.config() gsap.defaults() 모든 트윈에서 상속해야하는 속성을 설정할 수 있습니다. gsap.delayedCall() 일정 시간이 지난 후 함수를 호출하는 간단한 방법을 제공합니다. gsap.exportRoot() gsap.from() 애니메이션의 움직임을 역방향으로 설정합니다. gsap.fromTo() 애니메이션의 움직임을 역방향으로 설정합니다. gsap.getById() 아이디를 가져옵니다. gsap.getProperty() 속성을 가져옵니다. gsap.getTweensOf() gsap.killTweensOf() gsap.parseEase() gsap.quickSetter() gsap.registerEase() gsap.regis..
[GSAP] 튜토리얼 튜토리얼 GSAP 튜토리얼입니다. 튜토리얼 GSAP 튜토리얼입니다. GSAP 속성 설명 gsap.config() gsap.defaults() 모든 트윈에서 상속해야하는 속성을 설정할 수 있습니다. gsap.delayedCall() 일정 시간이 지난 후 함수를 호출하는 간단한 방법을 제공합니다. gsap.exportRoot() gsap.from() 애니메이션의 움직임을 역방향으로 설정합니다. gsap.fromTo() 애니메이션의 움직임을 역방향으로 설정합니다. gsap.getById() 아이디를 가져옵니다. gsap.getProperty() 속성을 가져옵니다. gsap.getTweensOf() gsap.killTweensOf() gsap.parseEase() gsap.quickSetter() gsap.re..
[GSAP] Stagger Stagger 애니메이션을 순차적으로 적용합니다. Stagger 애니메이션을 순차적으로 적용합니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 애니메이션을 순차적으로 적용합니다. Sample1 box box box box 리셋 클릭하면 이동합니다. JQUERY //jQuery GSAP $(".start").on("click",function(){ TweenMax.staggerTo([".box1",".box2",".box3",".box4"] ,1, {left:"90%", scale:0.2, ease:Power3.easeOut},0.25); }); $(".choice .reset").on("click",function(){ TweenMax.to([".b..
[GSAP] Repeat Repeat 애니메이션의 반복 여부를 적용합니다. Repeat 애니메이션의 반복 여부를 적용합니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 애니메이션을 반복적으로 적용합니다. Sample1 box box box box 리셋 클릭하면 이동합니다. JQUERY //jQuery GSAP $(".start").on("click",function(){ TweenMax.to(".box1", 2, { left:"80%", repeat:1, ease:Power4.easeOut}); TweenMax.to(".box2", 2, { left:"80%", repeat:1, repeatDelay:1, ease:Power4.easeOut}); TweenMax.to(".b..
[GSAP] Timeline Timelile 애니메이션을 순차적으로 적용합니다. Timelile 애니메이션을 순차적으로 적용합니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 애니메이션을 순차적으로 적용합니다. Sample1 box 리셋 클릭하면 이동합니다. JQUERY $(".start").on("click",function(){ $(".box1") .animate({ left: "80%" }, 1000) .animate({ height: "300" }, 1000, 'easeOutQuad') .animate({ opacity: "0.5" }, 1000) .animate({ height: "60" }, 1000, 'easeInOutQuint') .animate({ opacity..
[GSAP] Controlling Controlling 애니메이션을 컨트롤 할 수 있습니다. Controlling 애니메이션을 컨트롤 할 수 있습니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 애니메이션을 컨트롤 합니다.. Sample1 box 리셋 play pause resume reverse seek(0.5) timeScale(0.5) timeScale(2) kill() restart() JQUERY //jQuery GSAP const tween = TweenMax.to(".box1",10,{left:"90%",borderRadius:"0%",rotation:"720deg"}); $(".btn1").click(function(){tween.play()}); $(".btn2")...
[GSAP] Callbacks callbacks 콜백함수를 이용한 애니메이션입니다. callbacks 콜백함수를 이용한 애니메이션입니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 콜백함수를 이용한 애니메이션입니다. Sample1 box 리셋 클릭하면 이동한 후 콜백함수를 호출합니다. JQUERY $(".start").on("click",function(){ $(".box1").animate({left:"90%"}, 1000, function(){ alert("제이쿼리 콜백함수 도착"); }); }); $(".reset").on("click",function(){ $(".box1").animate({ left: "0"}, 0); }); GSAP $(".start").on("cli..
[GSAP] Easing Easing 이동하는 애니메이션입니다. 이동하기 tweenMax를 이용하여 이동하는 애니메이션입니다. 문법(Syntax) TweenMax.to("target", duration, vars); 이동하기 버튼을 클릭하면 오른쪽으로 이동하는 애니메이션입니다. Sample1 box box box box box box box box 리셋 클릭하면 이징 효과에 따라 이동합니다. JQUERY $(".start").on("click",function(){ $(".box1").animate({ left: "80%" }, 2000, "swing"); $(".box2").animate({ left: "80%" }, 2000, "easeInQuad"); $(".box3").animate({ left: "80%" }, 2000..
[GSAP] Delay Delay 이동하는 애니메이션입니다. Delay tweenMax를 이용하여 이동하는 애니메이션입니다. 문법(Syntax) TweenMax.from("target", duration, vars); 딜레이 이동하기 버튼을 클릭하면 1초씩 딜레이 되면서 이동하는 애니메이션입니다. Sample1 box box box 리셋 클릭하면 딜레이 되면서 움직입니다. JQUERY $(".start").on("click",function(){ $(".box1").delay(1000).animate({ left: "80%" }, 2000); $(".box2").delay(2000).animate({ left: "80%" }, 2000); $(".box3").delay(3000).animate({ left: "80%" }, 2..
[GSAP] TweenMax.from TweenMax.from 이동하는 애니메이션입니다. 반대로 이동하기 tweenMax를 이용하여 이동하는 애니메이션입니다. 문법(Syntax) TweenMax.from("target", duration, vars); 반대로 이동하기 버튼을 클릭하면 오른쪽 반대로 이동하는 애니메이션입니다. Sample1 box 리셋 클릭하면 오른쪽 반대로 움직입니다. JQUERY //이런 기능이 없음 GSAP $(".start").on("click",function(){ TweenMax.from(".box1", 1, { left:"80%" }); }); $(".reset").on("click",function(){ TweenMax.from(".box1", 0, { left:"0%" }); }); JAVASCRIPT cons..
[GSAP] TweenMax.to TweenMax.to 이동하는 애니메이션입니다. 이동하기 tweenMax를 이용하여 이동하는 애니메이션입니다. 문법(Syntax) TweenMax.to("target", duration, vars); 1. 이동하기 버튼을 클릭하면 오른쪽으로 이동하는 애니메이션입니다. Sample1 box 리셋 클릭하면 오른쪽으로 움직입니다. 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..
1 2