[Motion] TweenMax

https://greensock.com/get-started-js

 

 

TweenMax시작하기

.to()

종료지점값을 지정

 

TweenLite.to([Selector], [Duration], {Properties:end values})

Selector : 대상자, 어떤걸?

Duration : 지속시간, 몇 초동안?

Properties:end values : 객체의 키와 값, 뭘? 어떻게?

 

눌러봐!

 

.from()

시작지점값을 지정

 

TweenLite.from([Selector], [Duration], {Properties:end values})

Selector : 대상자, 어떤걸?

Duration : 지속시간, 몇 초동안?

Properties:end values : 객체의 키와 값, 뭘? 어떻게?

 

눌러보면 바보

.fromTo()

시작과 종료지점값을 지정

==> load될 때 통통 튀는 문제 때문에 거의 사용x

 

TweenLite.fromTo([Selector], [Duration], {시작Properties:end values},{종료Properties:end values})

Selector : 대상자, 어떤걸?

Duration : 지속시간, 몇 초동안?

Properties:end values : 객체의 키와 값, 뭘? 어떻게?

바보바보~ 이제 안속지~

.staggerTo / .staggerFrom()

각 요소에 순차적으로 애니메이션을 실행

.staggerTo(어떤걸, 얼만큼, 어떻게, 얼마간격으로);

tm2.staggerTo(".name", 0.4, {x:-3,rotation:5,yoyo:true,repeat:-1,ease:Power0.easeIn}, 0.3);

 

그 외에 순차적인 모션 넣는 방법?

- 각각에 변수를 넣고 delay적용

- var 변수 = new TimelineMas;하고 delay적용..?

- 아묻따 stagger최고

 

+ 지정된 것들은 동시에 모션하는 방법

t1.add('m1')

   .to(~~~~~~,m1);

---

제어하기

==> TweenLite ~~~ 속성에 paused:true추가!

 

변수명.resume();    : 시작

변수명.pause();    : 멈춤

변수명.reverse();    : 되돌리기

변수명.restart();    : 재시작

 

다양한 속성

delay

:지연

delay:시간

 

onComplete

: 완료 후 상태

onComplete:함수명

TweenLite.to(photo, 1.5, {width:100, delay:0.5, onComplete:myFunction});
function myFunction() {
    console.log("tween finished");
}

 

Easing

:애니메이션에 변화율을 줘서 좀 더 유동적인 동작들을 수행

어어 이거!!ㅇㅋㅇㅋ

https://greensock.com/get-started-js에서 원하는 움직임 긁어와서 사용하기

var myTween = new TweenLite.to('.box', 2, {width:100, height:100, ease:Back.easeInOut.config(10), y:10, x:10, paused:true});


$('.btn_start').on('click',function(){
	myTween.resume();
})

 

Repeat

반복

repeat:반복횟수

repeat:-1 ==>무한반복

repeatDelay

:repeat하기까지의 지연시간

repeatDelay:시간

 

yoyo

: 다시 되돌아가기 (+repeat속성)

yoyo:true/false 

 

yoyoEase

: ...

yoyoEase:true/false

 

yoyoEase가 false인 경우(default)

=> 진행했던 애니메이션 그대로 뒤로 돌아간다.

yoyoEase가 true인 경우

=> 돌아가는 상태에 easing상태를 준다.

 

yoyoEase옵션을 주려면 easing을 함께 넣어줘야함!

bezier

: 곡선 움직임

 

~~, {bezier:[{left:~, top:~},{left:~, top:~},{left:~, top:~}...], ease:Power1.easeInOut, repeat:-1, yoyo:true}

 

clip

: 하이라이트나 밑줄처럼 밀리듯이 나타나는 것

: 요소의 특정 부분만 보이게 스르르륵...

상 -> 하
css : clip: rect(0px, 365px, 0px, 0px);
js : clip: "rect(0px,365px,390px,0px)"
하 -> 상
css : clip: rect(183px, 396px, 177px, 0px);
js : clip: "rect(0px,365px,390px,0px)"
우 -> 좌
css : clip: rect(0px, 201px, 201px, 201px);
js : clip: "rect(0px,201px,201px,0px)"
좌 -> 우
css : clip: rect(0px, 0px, 201px, 0px);
js : clip: "rect(0px, 201px, 201px, 0px)"

---

Timeline Animations

여러개의 애니메이션이 여러단계의 시퀀스가 필요할 때 사용하는 타임라인 기반의 애니메이션!

 

Timeline을 호출하려면 먼저 새로운 TimeLineLite로 새로운 변수를 생성해야 한다.

var 변수명 = new TimelineLite;

그리고 TweenLite대신 지정한 변수명을 사용해주면 됨!

그냥 TweenLite와 다른점은...

다른 애니메이션을 추가해야하니 세미콜론은 가장 마지막에 찍어줘야 한다는 점!

var tl = new TimelineLite;

tl.to("#myDiv", 2, {
  x:100,
  y:75,
  backgroundColor:"#000",
  ease: Power4.easeIn
})
.to ("#myDiv", 1 , {
  scaleX: 1.5,
  scaleY: 1.5,
  backgroundColor: "#454545",
  ease: Back.easeOut.config(1.7)
});

byseop.netlify.app/gsap/

---

EXAMPLES

codepen.io/soomini/pen/XWWroPV

 

$(window).on('load',function(){ 
    Motion(); 
}) 


function Motion(){ 
   var tl1 = new TimelineMax(); 
  tl1.staggerTo('.box1',0.5,{opacity:1},0.5) 
   
  //repeat: 반복모션. -1; 무한 루프,yoyo를 사용해줘야 repeat 사용 가능 
  var tl2 = new TimelineMax(); 
   tl2.staggerTo('.box2',0.5,{opacity:0, yoyo:true, repeat:1},1.0) 
      .call(function(){ 
        //모션 끝난 후 function 사용 가능!  
        //alert('모션 끝!') 
      }) 
   
  var tl3 = new TimelineMax(); 
   tl3.staggerTo('.box3',0.5,{opacity:0, yoyo:true, repeat:1},1.0) 
      .repeat(-1) 
      //repeat(-1) : 무한반복
   
   
} 

tl1 => 스르륵

tl2 => 깜빡깜빡깜빡

tl3 => 깜빡깜빡깜빡깜빡깜빡깜빡깜빡깜빡깜빡깜빡깜빡깜빡 ....