저는 한 가지를 말하면서 다른 것을 의미하기도 했고, 다른 것이 필요할 때 한 가지를 사용하기도 했습니다. 미래의 저를 위해 스크롤 기반 애니메이션 (scroll-driven animations), 스크롤 트리거 애니메이션 (scroll-triggered animations), 컨테이너 쿼리 스크롤 상태 (container query scroll states), 그리고 뷰 전환 (view transitions) 사이의 고차원적인 유사점과 차이점을 정리할 테니 양해 부탁드립니다.

스크롤 기반 애니메이션 (Scroll-Driven Animations)

스크롤-기반 (driven) 애니메이션은 말 그대로 스크롤에 반응하는 애니메이션입니다. 구체적으로, 스크롤 진행도(progress)와 애니메이션의 진행도 사이에 직접적인 연결 고리가 있습니다. 스크롤을 내리면 애니메이션이 앞으로 진행되고, 스크롤을 올리면 애니메이션이 뒤로 재생됩니다. 스크롤을 멈추면 애니메이션도 멈춥니다.

.element {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
...

CodePen Embed Fallback

스크롤 트리거 애니메이션 (Scroll-Triggered Animations)

스크롤-트리거 (triggered) 애니메이션은 스크롤 시 실행되며 전체 과정이 한 번에 재생됩니다. 다시 말해, 여기에는 스크롤 진행도와의 직접적인 연결 고리가 없습니다. 요소가 *트리거 활성화 범위 (trigger activation range)*라고 불리는 정의된 임계값을 통과할 때 애니메이션이 실행, 실행, 실행됩니다. 예를 들어, 해당 요소가 스크롤포트 (scrollport)에 진입하거나 벗어날 때가 이에 해당합니다.

CodePen Embed Fallback

컨테이너 쿼리 스크롤 상태 (Container Query Scroll State)

이 기능은 CSS 조건부 규칙 모듈 레벨 5 (CSS Conditional Rules Module Level 5) 명세의 작업 초안 (working draft)에 포함되어 있습니다. 명세에서는 다음과 같이 정의합니다:

[...] 스크롤 위치에 따라 달라지는 상태를 컨테이너에 대해 쿼리할 수 있도록 허용합니다.

이것이 제 머리가 아픈 이유입니다. 이것은 스크롤 기반 애니메이션과도 비슷하고, 스크롤 트리거 애니메이션과도 비슷하지만, 컨테이너가 어떤 종류의 스크롤 조건에 도달했을 때 스타일을 업데이트합니다. 예를 들어:

.sticky-nav {
  container-type: scroll-state;
  position: sticky;
...

CodePen Embed Fallback

뷰 전환 (View Transition)

이것은 스크롤과 아무런 관련이 없습니다! 또한 view()와도 관련이 없습니다. 우리는 실제로 CSS와 JavaScript 기능이 맞물려 두 가지를 수행할 수 있는 완전한 API에 대해 이야기하고 있습니다.

동일 문서 전환 (Same-document transitions)

사용자의 상호작용(Interaction)에 반응하여 요소가 한 상태에서 다른 상태로 변경됩니다. 저는 Modern Web Weekly에서 라디오 버튼의 체크 상태가 한 입력값에서 다른 입력값으로 이동하며 애니메이션되는 것을 보고 정말 감탄했습니다.

CodePen Embed Fallback

기본적으로 상태 변화가 시작된 것과 동일한 페이지 내에서 일어납니다. Bramus는 Chrome 팀의 이 컬렉션에서 보여주는 수많은 아름다운 예시들과 함께, 모든 종류의 뷰 전환 (View Transitions) 분야의 왕이라 할 수 있습니다.

문서 간 전환 (Cross-document transitions)

한 페이지에서 다음 페이지로 넘어갈 때 애니메이션을 적용합니다. 기본 사용법은 페이지 A에서 페이지 B로(그리고 다시 돌아올 때도) 크로스페이드 (Crossfade) 효과를 주는 것이며, 이는 구현하기 매우 쉽습니다. 물론 여기서부터는 훨씬 더 복잡해질 수 있습니다. Sunkanmi는 최근 여러 가지 레시피를 공유했는데, 원형 clip-path를 사용하여 첫 번째 페이지를 지워내며 두 번째 페이지를 드러내는 이 깔끔한 방식이 그중 하나입니다.

이게 전부입니다!

이렇게 명확하게 설명하는 것이 저에게는 도움이 됩니다.