완전한 제어
애니메이션 타이밍과 이징을 원하는 대로 다룰 수 있습니다.
환영합니다
JavaScript가 매 프레임마다 위치를 계산합니다.
아래로 스크롤
프레임 단위로 부드럽게 움직입니다.
특징
카드가 뷰포트 안에서 어디 있느냐에 따라 애니메이션됩니다.
임의의 곡선
어떤 수학적 이징 함수든 직접 구현할 수 있습니다.
디버깅
콘솔 로그와 중단점으로 쉽게 들여다볼 수 있습니다.
숫자로 보기
스크롤에 따라 값이 부드럽게 보간됩니다.
0
초당 프레임 수
0%
브라우저 지원율
0ms
프레임 예산
구현 방식
requestAnimationFrame이 화면 주사율에 맞춰 실행됩니다getBoundingClientRect()로 진행도를 계산합니다- JavaScript가 transform을 직접 지정합니다
- GPU 가속을 위해
will-change를 씁니다
브라우저 지원
- Chrome ✅ (전 버전)
- Firefox ✅ (전 버전)
- Safari ✅ (전 버전)
- Edge ✅ (전 버전)
- IE 10+ (접두사 필요)
성능
- 메인 스레드에서 돌기 때문에 JS를 붙잡습니다
- 잘 다듬으면 60fps 정도가 나옵니다
- 스크롤 리스너에
passive: true를 쓰세요 - 계산은 rAF로 묶어 throttle 하세요