Problem Solving

• Failure :(

  • ScrollTrigger로 gif 이미지의 투명도를 조절했으나 스크롤을 한참 내리고 다시 올라가면 투명도가 조절되는 위치가 변함
    -> 원인을 찾지 못하여 결국 해결하지 못함
  • 브랜드 페이지에서 스크롤을 내리면 이미지가 쌓여있는 효과를 ScrollTrigger pin으로 고정하여 주고 싶었으나 실패
    -> 자동으로 하나씩 나타나게 하는 것으로 대체

• Success :)

  • 인트로에서 스크롤을 내리면 나타나는 텍스트 애니메니션이 메인이미지 배경으로 깔려야하는데 이미지 위로 올라와서 z-index 값을 지정했으나 변화가 없음
    -> <section class="intro"> 자식요소에 position absolute를 주고 z-index 값 지정하니까 해결!
  • 푸터로 넘어갈 때, 푸터 전 페이지가 위로 올라가면 푸터가 서서히 보이게 하기 위해 position sticky와 z-index를 주었더니 배경색이 없던 페이지들과 겹쳐서 보임
    -> 모든 <section>에 배경색을 흰색으로 지정
    -> z-index로 맨밑으로 보냈던 인트로/엔딩에 텍스트 애니메이션이 안 보이는 또 문제 발생
    -> 애니메이션에 직접 준 z-index를 뺀 대신 위로 올라오는 이미지에 z-index를 줌!
  • 푸터에 z-index -9999를 주었더니 연결되어 있는 포트폴리오와 작업일지 링크가 눌리지 않음
    -> z-index를 0으로 수정하고 각각의 <section>에 0보다 큰 z-index 값을 부여
    -> 그러나 일부 페이지가 보이지 않는 문제가 또 발생
    -> position 기본 값인 static으로 자동 부여돼서 그랬던 것. relative로 값 지정하니 해결!
  • gsap scrollSmoother을 주면 scrollTrigger에서 준 pin 고정이 되지않음
    ->lenis 플러그인을 사용해 lenis가 발생하면 ScrollTrigger.update 함수가 호출되도록 해서 부드러운 스크롤을 구현!