본문 바로가기

Webstoryboy

Category

Explanation

GSAP/Alphabet

gsap.set()

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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
gsap.fromTo()

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기