[LAB-12] GSAP 스크롤트리거 관련 이슈

문제 상황

GSAP을 이용한 스크롤 트리거 애니메이션 적용중 발생한 문제입니다.

브라우저 새로고침을 하거나, LadingPage.jsx 에서 cmd+s 를 누르면, 그때그때 브라우저에서 보여지는 스크롤트리거가 오류가 나기도 하고 레이아웃이 다 틀어지기도하고 그럭저럭 멀쩡하기도 합니다. 에러의 보여짐이 계속 달라지다보니, 어떻게 에러를 확인하고 원인을 파악하고 다루어야할지 감이 잡히지 않습니다. 😭 조언을 부탁드립니다.

그리고 모든 섹션을 flex로 설정했는데, 왜 겹침 현상이 일어나는것일까요?

아래 이미지의 오렌지색 선이 '티빙에만 있는 재미' 컨테이너 borderline인데, 푸터 밑까지 뚫고가고 있습니다.

1️⃣ 에러 예시

레이아웃이 깨지고 스크롤트리거가 깜빡거리는 등 문제가 일어납니다. Mar-25-2023 01-18-55(2)

2️⃣ 에러 예시

스크롤 트리거는 그럭저럭 잘 작동하는듯한데, 레이아웃은 여전히 무너졌습니다.

푸터 섹션 아래에 있는 흰 줄이 '티빙에만 있는 재미' 섹션의 borderline입니다ㅠ

문제 분석

GSAP [fromTo](https://greensock.com/docs/v3/GSAP/gsap.fromTo()), scrollTrigger 혼용 사용에 따른 문제로 분석됩니다.

fromTo 애니메이션이 적용되기 전, scrollTrigger 애니메이션이 동시 설정 됨에 따라 pin 높이를 정상적으로 처리하지 못하는 문제를 보입니다. 😳

문제 해결

fromTo 애니메이션이 완료된 이후, scrollTrigger 애니메이션이 실행되어야 합니다.

useLayoutEffect(() => {

  // fromTo 애니메이션 1
  gsap.fromTo(
    '.landingSectionAnimation',
    { y: 100, opacity: 0 },
    {
      y: 0,
      opacity: 1,
      duration: 1.2,
      stagger: { each: 0.1, from: 'start' },
    }
  );

  // fromTo 애니메이션 2
  gsap.fromTo(
    '.landingElementAnimation',
    { y: 20, opacity: 0 },
    {
      y: 0,
      opacity: 1,
      duration: 0.6,
      stagger: { each: 0.1, from: 'start' },
      // 애니메이션 완료 후, scrollTrigger 애니메이션 실행
      onComplete: () => pinAnimation(),
    }
  );

  // scrollTrigger 애니메이션
  const pinAnimation = () => {
    gsap.to('.imgContainer', {
      scrollTrigger: {
        trigger: '.triggerOriginal',
        start: 'top top',
        end: 'bottom 75%',
        pin: true,
        pinSpacing: true,
        scrub: true,
        markers: true,
      },
      x: -858,
    });
    };

}, []);

적용 결과

수정 코드가 적용된 화면은 아래 영상을 통해 확인할 수 있습니다.

https://user-images.githubusercontent.com/1850554/227692793-5fbc0942-0ac8-4edc-9e54-9be6c20830d5.mp4

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요. 😃

src.zip

yamoo9 / likelion-FEQA