본문 바로가기

Webstoryboy

Category

Explanation

GSAP/Alphabet

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 다양한 애니메이션을 주고 싶을 때 설정합니다.

정의(Definition)

  • gsap.fromTo() 메서드를 움직임의 시작 점과 끝나는 점을 지정하는 애니메이션입니다.
  • gsap.fromTo() 메서드는 CSS의 애니메이션 관련된 모든 속성을 사용할 수 있습니다.
  • gsap.fromTo() 메서드를 제어하려면, 여러가지 컨트롤 메서드를 사용할 수 있습니다.

비교(Compare)

  • gsap.to() 메서드는 움직임의 끝나는 점을 지정하는 애니메이션입니다.
  • gsap.from() 메서드는 움직임의 시작 점을 지정하는 애니메이션입니다.
  • gsap.fromTo() 메서드를 움직임의 시작 점과 끝나는 점을 지정하는 애니메이션입니다.

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
gsap.fromTo()

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기