01
scroll() 진행바
맨 위 보라색 바는 스크롤러 전체 진행도(0~100%)에 scaleX가 묶여 있어요. 끝까지 내리면 꽉 찹니다.
스크롤하면 CSS가 움직여요
최신 CSS animation-timeline 만으로 만든 스크롤 진행바와 등장 애니메이션입니다. 천천히 아래로 내려보세요.
SCROLL
02
view() reveal
이 카드는 화면에 들어오는 동안 투명도와 위치가 보간돼요. 들어올 때 슥 떠오르는 느낌이 그것.
03
animation-range
'언제부터 언제까지' 애니메이션을 진행할지 정해요. entry 0% ~ cover 40% = 막 보이기 시작할 때부터 어느 정도 들어왔을 때까지.
04
JS 부담 0
스크롤 이벤트 핸들러가 없으니 메인 스레드가 한가해요. 애니메이션은 브라우저 합성기(compositor)가 처리합니다.
05
폴백이 안전해요
이 기능을 모르는 브라우저에서는 카드가 그냥 '처음부터 보이게' 처리돼요. 깨지지 않습니다.
06
모션 줄이기 존중
prefers-reduced-motion(움직임 최소화) 설정이 켜져 있으면 모든 reveal 애니메이션을 끄고 바로 보여줘요.
07
선언적이라 단순해요
'스크롤 위치 = 애니메이션 진행도'라는 관계를 CSS에 한 번 선언하면 끝. 상태 동기화 버그가 없어요.
08
여기까지 내려왔어요
위 진행바가 거의 꽉 찼을 거예요. 다시 올려보면 모든 게 반대로 되감깁니다 — 진행도가 스크롤을 그대로 따라가니까요.
끝까지 오셨어요 🎉
위로 다시 올리면 진행바와 카드가 그대로 되감깁니다. 스크롤이 곧 타임라인이니까요.