gsap.fromTo()

애니메이션을 줄 때 시작점과 끝점을 지정해주는 메서드입니다. gsap.to() 메서드는 끝나는 애니메이션 지점을 설정하고, gsap.from() 메서드는 시작하는 애니메이션 지점을 설정하고, gsap.fromTo() 메서드는 시작하는 점과 끝나는 점 모두를 설정할 수 있습니다. 이렇게 하면 CSS 속성을 따로 수정하지 않고 스크립트로 애니매이션을 완벽하게 통제할 수 있습니다.

gsap.fromTo()

gsap.fromTo() 메서드는 시작 점과 끝나는 점을 지정하는 애니메이션입니다.

특징	설명
버전	GSAP3
결과값(return)	움직임(tween)
사용성	★★★★☆

문법(Syntax)

gsap.fromTo("타겟", {시작 속성: 시작 속성값, ....},{끝나는 속성: 끝나는 속성값, ....});

타겟(targets): 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능)
시작 속성(values) : 애니메이션과 관련된 속성을 설정합니다. (ease, duration, delay, onComplete 사용 못함)
끝나는 속성(values) : 애니메이션과 관련된 속성을 설정합니다. (ease, duration, delay, onComplete 사용 가능)

속성(Property)

속성값	설명
callbackScope	콜백함수를 설정합니다. (onStart, onUpdate, onComplete, etc)
data	속성 데이터를 추가하여 움직임을 설정합니다.
delay	애니메이션이 시작되기 전 시간을 설정합니다.
duration	애니메이션 지속 시간을 설정합니다. 기본 값은 0.5초
ease	애니메이션의 변경 속도를 설정합니다. 기본 값은 "power1.out"
id	고유 식별자 id 값을 설정합니다.
immediateRender	애니메이션을 즉시 렌더링 하도록 설정합니다. 기본 값은 false
inherit	애니메이션을 부모로 부터 상속 받지 않도록 설정합니다. inherit: false.
lazy	특정 애니메이션에 대해여 지연 렌더링을 비활성화하려면 lazy: false를 설정합니다. 기본 값은 Default: true
onComplete	애니메이션이 완료 되었을 때 함수를 호출합니다.
onCompleteParams	onComplete 함수를 전달할 매개 변수를 설정합니다.
onRepeat	애니메이션을 반복 할 때 함수를 호출합니다. 반복을 설정한 경우에 발생합니다.
onRepeatParams	onRepeat 함수를 전달할 매개 변수를 설정합니다.
onReverseComplete	애니메이션이 역방향에서 다시 시작점에 도달했을 때 함수를 호출합니다.
onReverseCompleteParams	onReverseComplete 함수를 전달할 매개 변수를 설정합니다.
onStart	애니메이션이 시작할 때 함수를 호출합니다.
onStartParams	onStart 함수를 전달할 매개 변수를 설정합니다.
onUpdate	애니메이션이 업데이트 될 때마다 함수를 호출합니다.
onUpdateParams	onUpdate 함수를 전달할 매개 변수를 설정합니다.
overwrite	애니메이션이 처음 렌더링 될 때 다른 애니메이션과의 관계를 통해 종료 여부를 설정합니다. 기본값은 false
paused	true이면 애니메이션이 일시 중지됩니다. 기본값은 false
repeat	애니메이션 반복 횟수를 설정합니다. repeat: 1은 총 2번을 반복하게 됩니다. 기본값은 0
repeatDelay	애니메이션 반복 사이의 대기 시간을 설정합니다. 기본값은 0
repeatRefresh	repeatRefresh: true를 설정하면 반복 애니메이션이 무효화됩니다. 이것은 랜덤값을 설정할 때 유용합니다.
reversed	true이면, 애니메이션이 반대로 움직입니다.
runBackwards	true이면, 애니메이션이 시작 값과 끝나는 값을 반전시킵니다.
stagger	여러개의 요소를 각각 시간차를 두고 애니메이션을 설정합니다.
startAt	모든 속성의 시작 값을 설정합니다.
yoyo	true이면, 애니메이션을 반복적으로 실행하여, 앞뒤로 이동하는 것처럼 보입니다.
yoyoEase	애니메이션이 반복적으로 실행될 때 움직임을 설정합니다.
keyframes	다양한 애니메이션을 주고 싶을 때 설정합니다.