스크롤 기반 반복문

1. ScrollTrigger.batch의 목적:

ScrollTrigger.batch는 여러 요소가 스크롤에 반응할 때 성능을 최적화하며 일괄적으로(배치) 애니메이션을 적용하는 방식이다. 즉, 화면에 여러 요소가 있을 때 스크롤 이벤트에 따라 특정 구간에 들어오면 해당 요소들에 애니메이션을 일괄 적용하는 것.

• 특징:
  스크롤 이벤트에 맞춰 동작: 스크롤하면서 화면에 요소가 나타나거나 사라질 때만 애니메이션이 실행된다.
  성능 최적화: 요소가 많이 있을 때 각각 독립적으로 처리하지 않고, 여러 개의 요소를 모아서 한꺼번에 처리하므로 성능에 좋음!

2. forEach의 목적:

forEach는 배열이나 HTML 요소 리스트에 대해 순차적으로 하나씩 작업을 수행하는 방법이다. 스크롤과는 관계없이 반복문 역할만함.

• 특징:
  순차적으로 요소 하나씩 처리: 스크롤 이벤트 없이 요소 리스트를 순차적으로 반복하여 각 요소에 대해 작업을 한다.
  스크롤과 관련 없음: 스크롤을 기반으로 작동하는 애니메이션과는 무관하며 단순히 반복 작업에 사용된다.

비교

ScrollTrigger.batch:

ScrollTrigger.batch(".item", {
  onEnter: (batch) => {
    gsap.to(batch, { opacity: 1, y: 0 }); // 스크롤을 통해 여러 요소가 한 번에 나타남
  }
});

forEach:

document.querySelectorAll('.item').forEach(item => {
  gsap.to(item, { opacity: 1, y: 0 }); // 각 요소가 순차적으로 애니메이션 실행
});

요약:
ScrollTrigger.batch: 스크롤 이벤트에 반응하는 여러 요소에 애니메이션을 일괄적으로 적용하여 성능을 최적화함. 스크롤과 관련된 이벤트에 최적화!!
forEach: 배열이나 HTML 요소 리스트의 각 항목에 대해 반복 작업을 수행하는 일반적. 스크롤과는 무관하며 단순한 반복 작업을 처리할 때 사용됩니다.

실수

두 코드의 차이는 ScrollTrigger가 한 번만 작동하느냐 아니면 각 요소별로 따로 작동하느냐입니다.

수정전
gsap.from(".sc-title .line", {
    height: "0",
    ease: "none",
    duration: 5,
    stagger: 1,

    scrollTrigger: {
        trigger: ".sc-title",
        start: "0% 70%",
        end: "0% 70%",
        scrub: 1,
        markers: true,
    },
});

수정후
gsap.utils.toArray(".sc-title .line").forEach((item) => {
  gsap.from(item, {
    height: "0",
    ease: "none",
    duration: 5,
    scrollTrigger: {
      trigger: item, // 각 개별 아이템을 기준으로 트리거 설정
      start: "0% 70%",
      end: "0% 70%",
      scrub: 1,
      markers: true,
    },
  });
});

📌data-속성

data- 속성은 개발자가 특정한 기능이나 데이터와 관련된 요소를 쉽게 찾고 조작할 수 있도록 도와줍니다. 코드의 가독성과 유지보수성 향상된다!!!!
예를 들어
data-scroll-opacity와 같은 사용자 정의 속성을 사용하는 이유는 특정 요소에 스크롤 관련 애니메이션을 적용할 때, 요소를 쉽게 타겟팅하기 위해.
이 클론파일에서 data-scroll-opacity는 스크롤에 따라 불투명도(opacity)와 위치(y)를 제어하기위해 사용됨!

gsap.set("[data-scroll-opacity]", {
  opacity: 0,
  y: 30,
});

ScrollTrigger.batch("[data-scroll-opacity]", {
  start: "0% 85%",
  end: "100% 0%",
  onEnter: (batch) => {
    gsap.to(batch, {
      opacity: 1,
      y: 0,
    });
  },
  onLeaveBack: (batch) => {
    gsap.to(batch, {
      opacity: 0,
      y: 30,
    });
  },
});

data-scroll-opacity 속성을 가진 모든 요소에 대해 스크롤을 통해 애니메이션이 적용됩니다. 스크롤이 특정 위치에 도달하면 해당 요소의 불투명도와 위치가 변경되며 애니메이션 효과가 발생!