← 인덱스
cycle · 2026-05-09

Scroll
Cinema

animation-timeline: scroll()과 view()로 만든, scroll-driven animations 설명서. 일곱 챕터를 스크롤하며 직접 보고, 마지막 샌드박스에서 직접 조립하세요. 상단 초록 바도 같은 API로 채워집니다.

↓ 아래로 스크롤
CH 01 · scroll(root)

스크롤이 시간이 된다

scroll-driven animations는 시간 대신 스크롤 위치를 진행도로 사용합니다. 페이지를 끝까지 내리는 동안 0%→100%의 진행도가 흐르고, 그 위에 어떤 키프레임이든 얹을 수 있습니다.

0%
CSS
@keyframes fill { to { transform: scaleX(1); } }
.bar-fill {
  transform: scaleX(0);
  animation: fill linear;
  animation-timeline: scroll(root block);
}

왼쪽 바와 페이지 상단 초록 바가 같은 시점에 같은 진행도를 가집니다.

CH 02 · scroll() axis

page scroll에 묶다

scroll(root block)은 페이지의 세로 스크롤을 타임라인 소스로 씁니다. 가로 스크롤러에 묶고 싶으면 scroll(self inline)을 쓰면 되고요. 아래 펑크는 페이지 스크롤에 따라 좌→우로 미끄러집니다.

CSS
@keyframes slide {
  from { transform: translateX(-40%); }
  to   { transform: translateX(40%); }
}
.puck {
  animation: slide linear;
  animation-timeline: scroll(root block);
}

소스 옵션: scroll(root|nearest|self axis) · axis = block | inline | x | y

CH 03 · view()

요소가 자기 등장을 지휘한다

view() 타임라인은 요소가 뷰포트에 들어오고 나가는 동안의 진행도를 줍니다. IntersectionObserver를 쓸 일이 사라집니다. 칩으로 animation-range를 바꿔보세요.

CARD

스크롤되어 들어오는 동안 페이드+상승하다 자리를 잡습니다.

animation-range
animation-timeline: view();
animation-range: entry 0% cover 50%;
CH 04 · animation-range

phase로 자르기 — entry / cover / exit / contain

view 타임라인에는 네 단계가 있습니다. entry는 들어오는 동안, cover는 완전히 보이는 동안, exit는 나가는 동안, contain은 요소가 스크롤포트보다 작을 때만 의미가 있는 "딱 머무르는 구간"입니다.

entry 0%cover 50%
phase
animation-range: entry 0% cover 50%;
CH 05 · easing

시간이 아니지만 곡선은 살아있다

scroll-driven animation도 일반 키프레임 애니메이션과 똑같이 animation-timing-function(=easing)을 따릅니다. 같은 스크롤 진행도라도 linear는 균일하게, ease-in-out은 양 끝에서 천천히 움직이죠.

timing-function
animation: easingFill linear;
animation-timeline: view();
animation-range: cover;
CH 06 · stagger

12개의 타일이 줄지어 깨어나다

개별 요소마다 --i를 다르게 주고, animation-range: entry calc(var(--stg) * var(--i)) cover ...로 진입 구간을 어긋나게 만들면 staggered reveal이 한 줄의 CSS로 가능합니다.

stagger 간격
.tile {
  animation-timeline: view();
  animation-range: entry calc(4% * var(--i))
                   cover calc(20% + 4% * var(--i));
}
CH 07 · sandbox

직접 조립해보기

timeline / range / easing / transform을 골라 카드의 동작을 바꾸고, 그 결과로 만들어지는 CSS를 그대로 복사해 가세요.

DEMO
animation-timeline
animation-range
animation-timing-function
transform (from → to)
앙코르

셋, 둘, 하나 — 마지막 세 장면

조립한 도구로 만들 수 있는 작은 장면 셋. 각 카드는 자기 자신의 view() 타임라인을 가지고 있습니다.

Glyph rise

각 글자마다 animation-range 시작점을 살짝 어긋나게 줘서 만든 자체적인 stagger.

SCROL

Pulse ring

scale + box-shadow를 같은 진행도에 묶어 카드가 시야에 머무는 동안 한 번 부풀어오르는 글로우.

Read-meter

카드 하단의 4px 띠가 animation-range: cover로 채워지며 "이 카드 다 읽었음" 신호로 쓰일 수 있어요.