gsap.set()
gsap.set() 메서드는 요소에 속성 값을 설정합니다. gsap.to() 메서드를 이용하여 애니메이션 주기 위하여, 애니메이션 초기 설정이 필요합니다. 이럴 경우 CSS를 통해 설정 할 수도 있지만, gsap.set()를 통해 설정하면, 조금 더 편합니다. 물론 초기 설정 즉 시작 값이 설정이 불편하면, gsap.from() 또는 gsap.fromTo() 메서드를 활용 할 수 있습니다.
gsap.set()
gsap.set() 메서드는 요소에 속성 값을 설정합니다.
| 특징 | 설명 |
|---|---|
| 버전 | GSAP3 |
| 결과값(return) | 움직임(tween) |
| 사용성 | ★★★★☆ |
문법(Syntax)
gsap.set("타겟", {속성: 속성값, ....});
//애니메이션 속성을 설정하고 애니메이션을 주는 경우
gsap.set(".class", {x: 100, y: 50, opacity: 0});
gsap.to(".class", {duration: 0.4, x: 100, y: 50, opacity: 1});
//타겟을 여러개로 설정할 경우
gsap.set([".class1", ".class2", ".class3"], {x: 100, y: 50, opacity: 0});
- 타겟(targets): 애니메이션을 적용할 개체를 선택합니다. (CSS 선택자, Javascript 선택자 가능)
- 속성(values) : 애니메이션과 관련된 속성을 설정합니다.
정의(Definition)
- gsap.set() 메서드는 요소에 속성 값을 설정합니다.
- gsap.set() 메서드는 요소의 속성 값을 즉시 실행합니다. 보통 gsap.to() 메서드와 같이 사용하게 됩니다.
- gsap.set() 메서드는 여러개 속성에 동시에 설정 할 수 있습니다. 여러 번 반복해서 사용할 경우 성능 향상을 위해 gsap.quickSetter() 메서드를 고려 할 수 있습니다.
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| gsap.fromTo() | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |
