스크롤 기반 애니메이션이란? JS 없이 스크롤에 맞춰 움직이기
scroll() 와 view() 타임라인 쓰는 법
스크롤에 따라 요소가 나타나거나 변형되는 인터랙션은 IntersectionObserver나 scroll 이벤트 리스너로 구현했었습니다. animation-timeline 속성과 scroll(), view() 함수를 사용하면 이를 순수 CSS만으로 구현할 수 있습니다.
메인 스레드를 차단하지 않아 성능이 우수하며, 프로그레스 바, 패럴랙스 효과, 스크롤 기반 페이드인 등 다양한 패턴에 활용할 수 있습니다.
적용 방법
1
@keyframes로 애니메이션을 정의한다
2
animation-timeline: scroll()로 스크롤 컨테이너에 연결한다
3
view()를 사용하면 요소의 뷰포트 진입/이탈에 연동할 수 있다
4
animation-range로 애니메이션 활성 구간을 세밀하게 조정한다
장점
- ✓ JavaScript 의존 없이 고성능 스크롤 애니메이션을 구현할 수 있다
- ✓ 컴포지터 스레드에서 실행되어 메인 스레드를 차단하지 않는다
단점
- ✗ 복잡한 스크롤 로직은 여전히 JavaScript가 필요할 수 있다
- ✗ Firefox와 Safari의 지원이 제한적이다
사용 사례
스크롤 진행률을 표시하는 상단 프로그레스 바
섹션이 화면에 들어올 때 페이드인 애니메이션 적용