홈페이지 상단에 가느다란 진행 바 하나, 스크롤하면 부드럽게 떠오르는 카드 한 줄. 이 흔한 두 가지를 붙이겠다고 어느새 GSAP, ScrollTrigger, AOS, Intersection Observer 코드가 줄줄이 들어와 있다. 라이브러리 한 줄을 더할 때마다 사이트는 한 박자씩 느려지고, 모바일에서는 첫 화면이 채 그려지기 전에 자바스크립트가 먼저 무거워진다. 그런데 2024년부터 크롬과 엣지에 안착한 Scroll-driven Animations는, 그 모든 코드 더미를 CSS 두세 줄로 대체하기 시작했다.
스크롤 한 줄을 위해 라이브러리가 자꾸 늘어난다
작은 회사 사이트도 요즘은 “스크롤하면 뭔가 움직이는” 인터랙션을 기본처럼 기대한다. 문제는 그걸 구현하는 코드가 점점 무거워졌다는 점이다. 스크롤 위치를 계산하려고 자바스크립트를 깔고, 화면에 들어왔는지 확인하려고 Intersection Observer를 또 깔고, 부드럽게 보이게 하려고 애니메이션 라이브러리를 다시 얹는다. 결국 단 한 줄의 시각 효과를 위해 수십 KB의 스크립트가 매번 로드된다.
animation-timeline: scroll() — 페이지 진행률을 그대로 애니메이션에 연결한다
Scroll-driven Animations의 핵심은 단순하다. 기존 CSS @keyframes에 “시간” 대신 “스크롤 위치”라는 새로운 타임라인을 끼워 넣는 것이다. 스크롤 진행률이 곧 애니메이션 진행률이 된다.
- 페이지 상단의 읽기 진행 바를 만들 때, 자바스크립트로 스크롤 이벤트를 듣지 않고 animation-timeline: scroll() 한 줄로 끝난다.
- 스크롤이 멈추면 애니메이션도 멈추고, 다시 위로 올리면 자연스럽게 되돌아간다. 위치와 모션이 1:1로 묶이는 셈이다.
- 브라우저가 합성 스레드에서 직접 처리하므로 자바스크립트 기반 구현보다 훨씬 가볍고 끊김이 적다.
animation-timeline: view() — 요소가 화면에 들어오는 순간만 잡아낸다
“카드가 시야에 들어올 때 살짝 떠오르며 나타나는” 클래식한 등장 애니메이션은 그동안 거의 모든 사이트가 자바스크립트로 처리했다. view() 타임라인은 그 작업을 CSS로 옮긴다.
- 요소가 뷰포트로 들어오기 시작하는 시점이 0%, 완전히 빠져나가는 시점이 100%인 자체 타임라인을 갖는다.
- opacity, transform만으로 페이드인·슬라이드업·줌인 같은 인터랙션을 깔끔하게 만들 수 있다.
- 스크롤을 위로 되감으면 애니메이션도 그대로 되감긴다. 무리하게 한 번만 재생되도록 묶지 않아도 되는 셈이다.
작은 회사 사이트에서 당장 쓸 만한 장면들
거창한 패럴럭스 사이트가 아니어도 활용처는 많다.
- 상단 읽기 진행 바: 블로그 포스트 위쪽에 가느다란 색 띠 하나. 사용자에게 글의 분량 감을 알려주는 작은 친절이다.
- 섹션별 등장 페이드: 회사 소개·서비스·후기 카드가 화면에 들어올 때 자연스럽게 떠오르도록 처리한다.
- 히어로 이미지 패럴럭스: 메인 사진이 스크롤보다 약간 느리게 움직이며 깊이감을 만든다.
- 스크롤 위치별 타이포 강조: 긴 회사 스토리에서 핵심 문장이 화면 가운데로 올 때만 진하게 보이게 한다.
지원되지 않는 브라우저에서는 그저 정적으로 둔다
2026년 현재 Scroll-driven Animations는 크롬과 엣지에서 안정적으로 동작하고, 사파리·파이어폭스는 부분 지원 또는 플래그 단계에 가깝다. 다만 이 기능은 점진적 향상(progressive enhancement)에 무척 잘 어울린다. 지원되지 않는 브라우저에서는 애니메이션이 적용되지 않고 그저 정적인 화면이 보일 뿐, 사이트가 깨지지는 않는다.
- 핵심 콘텐츠는 항상 자바스크립트와 무관하게 보이도록 설계한다.
- 스크롤 인터랙션은 장식으로 다루고, 없어도 동작하는 상태를 기본값으로 둔다.
- @supports (animation-timeline: scroll())로 감싸면 향후 지원 브라우저가 늘어날 때 자동으로 활성화된다.
스크롤 인터랙션을 다시 “브라우저에 맡기는” 시대
지난 십 년 동안 우리는 브라우저가 못 해주는 일을 자바스크립트로 메워 왔다. 이제 그 일들이 하나씩 CSS로 돌아오고 있다. View Transitions가 페이지 전환을, :has()가 부모 선택을, 그리고 Scroll-driven Animations가 스크롤 모션을 가져갔다. 작은 회사 사이트일수록 이 흐름은 더 반갑다. 무거운 의존성 없이도 충분히 세련된 인터랙션을 만들 수 있고, 결과적으로 사이트는 더 빠르고 더 오래간다.
CYAN 에이전시는 새로 만드는 모든 사이트에 이런 최신 CSS 기능을 기본값처럼 얹는다. 라이브러리 의존성을 줄이고 브라우저의 능력을 최대한 활용해야, 사장님이 1~2년 뒤에도 가볍게 유지할 수 있는 사이트가 남는다고 믿기 때문이다.