GSAP ScrollTrigger pin 오류 / 해결방안 추가

GSAP ScrollTrigger pin 설정시 

모든 요소가 사라지거나

CSS가 완전히 들어져버리는 오류가 발생했다.

 

대표적인 오류 원인은 아래와 같다.

1. pin 대상이 position: absolute 또는 fixed인 경우

• 원인: pin은 내부적으로 position: fixed 또는 relative를 쓰는데, 이미 절대 위치로 배치된 요소는 고정 시 의도한 위치를 벗어납니다.
• 현상: pin 시 요소가 화면 밖으로 날아가거나, 전혀 보이지 않음.
• 해결: pin할 요소는 static 또는 relative여야 하며, 절대 위치는 제거. 필요하면 pin 전용 래퍼를 만들어 그걸 고정.

---

2. pin 대상의 상위 요소에 transform, filter, perspective가 있는 경우

• 원인: CSS transform 속성이 걸린 요소는 고정 좌표계가 그 요소 기준으로 바뀝니다. pin이 position: fixed를 써도 뷰포트가 아니라 변형된 부모 기준으로 고정됨.
• 현상: 스크롤 시 pin 위치가 어긋나거나, 뷰포트를 벗어남.
• 해결: pin 대상의 모든 조상에서 transform/filter/perspective 제거,
  또는 pin을 해당 transform 요소보다 바깥쪽의 깨끗한 래퍼에 적용.

 

오류가 난 코드는 아래와 같았다.

 

 

ScrollTrigger를 처음 써보는 것도 아니고, 위와 같은 것들은 다시 확인하고 또 해봐도 적용된 부분이 없었다.

결국 몇시간을 사투 한 끝에 트리거를 페이지의 최상위 요소인 "main"으로 변경했다.

그랬더니 정상적으로 작동...
원인 연구는 더 해봐야 겠다..ㅠㅠ 

8/11 해결

 

원인은 scss 계층 구조 때문이었다.

 

gsap ScrollTrigger의 pin 속성의 동작 원리는
pin된 속성의 넓이와 스크롤 구간만큼의 높이에 Fixed 속성을 가진 요소를 생성하여 
dom에 끼워 넣는 것이다.

 

('title-wrap'요소에 pin을 걸었더니 그를 감싸는 pin-spacer div가 생성된 것을 볼 수 있었다.)

 

 

 

아래와 같이 계층 구조, 순서 선택자를 사용하여 코드를 작성할 경우

CSS가 완전히 틀어지게 되는 것이다.
(그래서 최상위 요소를 선택 시, 밀리는 요소들이 없어서 제대로 동작하였던 것.)

 

 

 

 

이전 프로젝트 시에도 scss와 scrollTrigger를 사용했었으나, 'pin'은 사용하지 않았었기에 발견하지 못한 문제였다.

 

약간씩 수정해서는 틀어짐이 해결되지 않았고,

이번 프로젝트는 전부를 '인라인' 속성으로 코드를 작성해주었더니, pin오류가 말끔히 사라졌다.