01. 애니메이션 기본 효과
GSAP 애니메이션 기본 효과에 관한 예제입니다.
- duration : 애니메이션 지속효과를 설정합니다.
- rotation : 요소의 회전을 설정합니다.
- borderRadius : 요소의 테두리 반지름을 설정합니다.
- scrollTrigger : 스크롤에 기반한 애니메이션을 생성하는 GSAP 플러그인입니다.
- trigger : 이 애니메이션의 트리거로 작용할 요소를 지정합니다.
- toggleActions : 트리거를 활성화 및 비활성화하는 동안 어떤 액션을 수행할지를 설정합니다.
- start : 요소의 애니메이션이 시작할 스크롤 위치를 지정하는 옵션입니다.
- end : 요소의 애니메이션이 중지될 스크롤 위치를 지정하는 옵션입니다.
- markers : 요소의 스크롤 트리거 영역과 애니메이션 시점이 시각적으로 표시됩니다.
- scrub : 요소가 스크롤될 때 애니메이션의 진행 상황이 스크롤 위치와 함께 부드럽게 변경됩니다.
- pin : 요소를 화면에 "고정"시키고 스크롤하는 동안 해당 요소에 대한 애니메이션을 적용할 수 있습니다.
- toggleClass : 스크롤 트리거에서 특정 위치에 도달할 때 CSS 클래스를 HTML 요소에 추가하거나 제거할 수 있습니다.
- onUpdate : 스크롤 중에 요소의 상태를 지속적으로 업데이트하고 스크롤 위치에 따른 동작을 제어하는 데 사용됩니다.
- onToggle : 스크롤 트리거가 트리거를 활성화 또는 비활성화할 때 호출되는 함수입니다.
02. 핀 애니메이션
GSAP 핀 애니메이션에 관한 예제입니다.
- gsap.timeline() : GSAP의 타임라인을 생성하는 함수로, 요소의 애니메이션 시퀀스를 순차적으로 나타내는데 사용됩니다.
- ScrollTrigger.create() : ScrollTrigger를 생성하는 함수로, 스크롤 이벤트를 감지하여 요소에 애니메이션을 적용하는 역할을 합니다.
- anticipatePin : 요소를 고정할 때 스크롤을 예상하도록 만드는 옵션으로, 값은 초 단위의 시간을 나타냅니다.
- scale : CSS 스타일 속성 및 변환(Transform)을 조절하여 요소의 크기를 변경하는 데 사용됩니다.
- autoAlpha : 요소의 투명도(알파값)와 표시 여부(가시성)를 제어하는데 사용됩니다.
- stagger : 요소들 사이의 지연을 설정하는 옵션으로, 여러 요소가 동일한 애니메이션을 적용할 때 각 요소 간의 시간차를 조절할 수 있습니다.
- amount : 요소 간의 간격을 지정합니다.
- ease : 애니메이션의 시간에 따른 변화를 조절하는 데 사용되는 함수 또는 설정입니다. 이것은 애니메이션을 부드럽게 시작하고 끝내거나, 동작을 더 빠르게 또는 느리게 진행하는 데 도움을 줍니다.
- gsap.utils.toArray : 이 함수는 DOM 요소 또는 선택자 집합을 JavaScript 배열로 변환합니다. 이것은 GSAP와 함께 사용하여 여러 요소에 애니메이션을 적용하거나 요소를 반복하거나 필요한 조작을 수행하는 데 유용합니다.
- offsetHeight : 요소의 높이를 반환합니다.
- pinSpacing : 이 속성은 ScrollTrigger로 요소를 고정(pinning)할 때 요소와 스크롤 애니메이션 사이의 간격을 제어하는 데 사용됩니다.
- ScrollTrigger.create : 함수를 호출하여 스크롤 트리거를 생성합니다.
- snapTo : 이 함수는 스크롤 스냅이 어떻게 작동할지를 정의하는 콜백 함수입니다. 이 함수는 두 개의 매개변수 progress와 self를 받습니다.
- gsap.utils.snap(panelStarts, self.scroll()) : 현재 스크롤위치를 panelStarts배열중 가장 가까운 위치로 스냅합니다.