Design Kits Blog

이 코드는 스크롤을 통해 화면에 나타난 텍스트 요소들(`#inc01 .b_txt`)의 배경 크기를 조정하여 애니메이션 효과를 주는 것입니다. 코드를 자세히 설명해 보겠습니다.

const textElements = gsap.utils.toArray('#inc01 .b_txt');

이 코드는 `#inc01` ID를 가진 요소 내부에 있는 모든 `.b_txt` 클래스를 가진 요소들을 선택합니다. 

이를 GSAP의 `toArray()` 함수를 사용하여 배열로 변환합니다.

textElements.forEach(text => { ... });

선택된 각 텍스트 요소에 대해 반복 작업을 수행합니다.

gsap.to(text, { ... });

각 텍스트 요소의 속성을 애니메이션화하는 데 사용됩니다.

- backgroundSize: '100%': 배경 크기를 100%로 애니메이션합니다.

- ease: 'none': 애니메이션의 움직임을 일정하게 유지하여 자연스럽게 보이도록 합니다.

- scrollTrigger: { ... }: 스크롤 트리거를 설정하여 특정 조건에 따라 애니메이션을 실행합니다.

- trigger: text: 각 텍스트 요소가 스크롤에 의해 나타날 때 애니메이션을 트리거하는 요소를 지정합니다.

- start: 'center 90%': 애니메이션 트리거의 시작 지점을 정의합니다. 텍스트 요소가 뷰포트의 중심에서 90% 아래에 있을 때 애니메이션을 시작합니다.

- end: 'center 30%': 애니메이션 트리거의 종료 지점을 정의합니다. 텍스트 요소가 뷰포트의 중심에서 30% 아래에 있을 때 애니메이션을 종료합니다.

- scrub: true: 스크롤 위치에 따라 애니메이션의 진행도가 조절되도록 합니다. 스크롤할수록 애니메이션 진행도도 함께 진행됩니다.

이 코드는 각 텍스트 요소가 화면에 특정 범위로 스크롤될 때 배경 크기가 변경되는 애니메이션 효과를 적용하여 동적인 시각적 효과를 만들어냅니다.

[예제]

See the Pen Untitled by designkits (@designkits) on CodePen.