완전한 제어
rAF로 프레임 단위 애니메이션을 직접 제어합니다.
양방향 토글
이 섹션을 지나쳤다가 다시 돌아와 보세요.
다시 오셨네요!
이 섹션에 들어올 때마다 나타납니다.
특징
카드가 뷰포트에 들어오면 애니메이션되고, 벗어나면 리셋됩니다.
맞춤 이징
자연스러운 움직임을 위한 이징 함수를 직접 씁니다.
부드러운 60fps
requestAnimationFrame이 화면 주사율에 맞춰 그립니다.
숫자로 보기
뷰포트에 들어오면 카운터가 부드럽게 올라갑니다.
0
목표 FPS
0%
브라우저 지원율
0ms
프레임 예산
구현 방식
getBoundingClientRect로 요소의 가시성을 추적합니다- 뷰포트 안이면 진행도를 올립니다
- 뷰포트 밖이면 진행도를 내립니다
- 이징을 입혀 움직임을 부드럽게 만듭니다
브라우저 지원
- Chrome ✅ (전 버전)
- Firefox ✅ (전 버전)
- Safari ✅ (전 버전)
- Edge ✅ (전 버전)
- 사실상 모든 곳에서 동작합니다
활용처
- 반복 재생되는 스크롤 애니메이션
- 인터랙티브 타임라인
- 제품 소개 페이지
- 여러 요소를 맞물리는 복잡한 연출