Progress, not events.
스크롤 이벤트에 개별 반응하지 않는다. 요소가 뷰포트를 지나는 진행도(0→1) 하나를 만들고,
모든 애니메이션이 그 값을 소비한다.
스크롤 진행도 하나로 길 드로잉 · 리빌 · 스택을 구동하는 데모
스크롤 진행도 하나가 이 페이지의 모든 모션을 끌고 간다. 진행도 계산, 패스 드로잉, 뷰포트 리빌 — 전부 이 파일 안의 코드다. 라이브러리 의존성 0.
스크롤 이벤트에 개별 반응하지 않는다. 요소가 뷰포트를 지나는 진행도(0→1) 하나를 만들고,
모든 애니메이션이 그 값을 소비한다.
stroke-dashoffset 을 진행도에 매핑하면 길이 스크롤을 따라 그려진다.
급가속 이징은 커스텀 베지어 솔버로.
캐릭터는 문서 좌표에 심어두고 IntersectionObserver 로 도착 순간
한 번만 튀어오르게 한다.
엔딩(언덕·구름)은 별도 섹션이 아니라 밴드 하단 오버레이. 구름은 뷰포트
통과 진행도로 수평 드리프트한다.
스택의 비밀은 sticky 하나 — 단, 마지막 카드 뒤에 스크롤 여유가 리스트 안에 있어야 세 장이 쌓인 뒤 세트로 릴리즈된다.