gsap.from()
애니메이션을 줄 때 시작 지점을 지정해주는 메서드입니다. 즉 gsap.to() 메서드와 반대입니다. gsap.to() 메서드는 시작점을 지정하지 않고, 완료된 점을 지정해주면 현재 지점에서 완료 지점까지 애니메이션 됩니다. gsap.from()은 시작점을 지정해주면, 시작점에서 현재점으로 이동하게 됩니다. 메서드만으로 애니메이션을 쉽게 컨트롤 하기 좋은 메서드입니다.
gsap.from()
gsap.from() 메서드는 시작 점을 지정하는 애니메이션입니다.
특징 | 설명 |
---|---|
버전 | GSAP3 |
결과값(return) | 움직임(tween) |
사용성 | ★★★★★ |
문법(Syntax)
gsap.from("타겟", {속성: 속성값, ....});
- 타겟(targets) : 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능)
- 속성(values) : 애니메이션과 관련된 속성을 설정합니다.
속성(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.from() 메서드는 애니메이션의 시작되는 점을 지정하는 애니메이션입니다.
- gsap.from() 메서드는 CSS의 애니메이션과 관련된 모든 속성을 사용할 수 있습니다.
- gsap.from() 메서드를 제어하려면, 여러가지 컨트롤 메서드를 사용할 수 있습니다.
비교(Compare)
- gsap.to() 메서드는 애니메이션의 끝나는 점을 지정하는 모션입니다.
- gsap.from() 메서드는 애니메이션의 시작 점을 지정하는 모션입니다.
- gsap.fromTo() 메서드를 애니메이션의 시작 점과 끝나는 점을 지정하는 모션입니다.
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
gsap.from() | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |