Main Thread 부하 제거를 위한 CSS 기반 Compositor-thread 스크롤 애니메이션 구현

Context

Intersection Observer 및 JS 이벤트 리스너 기반의 스크롤 제어 방식 채택. Main Thread 실행으로 인한 번들 크기 증가 및 연산 병목으로 인한 프레임 드랍 발생 가능성 존재.

Technical Solution

• animation-timeline 속성을 통한 시간 기반 애니메이션의 스크롤 위치 기반 전환 설계
• scroll() 함수를 활용하여 Root container의 전체 스크롤 진행률을 0%에서 100%까지 매핑한 진행 바 구현
• view() 함수를 통한 개별 Element의 Viewport 진입 및 이탈 시점 기반의 Reveal 애니메이션 제어
• animation-range 설정을 통해 Viewport 진입 구간(예: 0% ~ 40%)을 정밀하게 정의하여 시각적 트리거 최적화
• Compositor-thread에서 직접 렌더링을 처리하여 Main Thread의 연산 상태와 무관한 60fps 수준의 부드러운 모션 확보
• @supports 구문을 활용한 Progressive Enhancement 전략으로 미지원 브라우저에서의 Graceful Degradation 구현