to(), from()

TweenMax.to( target:Object, duration:Number, vars:Object )

.to()

stylesheet(css)에 명시된 값에서 출발하여 해당구문에 명시된 값까지 변화하는 애니메이션

#target{left:0;}

tweenMax.to("#target", 3, { left: "200px" });

#target 이라는 오브젝트를 3초동안 우측으로 200px 만큼 이동

---

TweenMax.from( target:Object, duration:Number, vars:Object )

.from()

해당구문에 명시된 값에서 출발하여 스타일시스에 명시된 값까지 변화 (to와 반대방향)

#target{left:200px;}

tweenMax.from("#target", 3, { left: "0" });

#target 은 우측으로 200px 이동한다.

---

vars : 

• delay : Number - 애니메이션 시작하기 전 지연시간
• paused: Boolean - true로 설정 시 애니메이션 멈춤 
• repeat : Number - 반복 횟수
• repeatDelay : Number - 반복과 반복사이 지연시간 
• yoyo : Boolean - true로 설정 시 애니메이션이 끝까지 이동 후 반대방향으로 다시 돌아간다. 1-2-3-3-2-1 순서
• ease : Ease - https://greensock.com/docs/Easing 에서 자세한 움직임을 볼 수 있다.
• onComplete : Function - 애니메이션이 완료된 후 함수 호출

tweenMax.to("#target", 3, { left: "200px", delay: 1, ease: Bounce.easeOut, onComplete: myfunction });
function myfunction(){
	console.log("Tween finished");
}

• onStart : Function - 애니메이션이 시작될 때 함수 호출
• startAt : Object - 시작값 설정

TweenMax.to("#target", 3, { x: 500, startAt: { x: 0 } });
//css에 x값이 100으로 설정되어 있어도 startAt 으로 재설정하면 0에서부터 500까지 이동한다