LS Mtron

// composables/useScrollReveal.ts — 스크롤 진입 애니메이션
import { onMounted, onUnmounted, type Ref } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export function useScrollReveal(el: Ref<HTMLElement | null>) {
  let ctx: gsap.Context;

  onMounted(() => {
    // context로 묶으면 unmount 시 한 번에 정리
    ctx = gsap.context(() => {
      gsap.from(el.value, {
        y: 40,
        opacity: 0,
        scrollTrigger: { trigger: el.value, start: "top 80%" },
      });
    });
  });

  // 라우트 이동 시 ScrollTrigger 누적(메모리 누수) 방지
  onUnmounted(() => ctx?.revert());
}

포트폴리오 설명을 위해 NDA 범위 안에서 재구성한 코드 예시입니다. 실제 저장소 원문이나 고객사 기밀 정보는 포함하지 않았습니다.