React Hooks로 스크롤 애니메이션 구현하기
✨ Demo
스크롤 시 동작하는 Fade In, Count, Clip Path 애니메이션을 React Hooks로 구현
스크롤 시 특정 방향에서 Fade In 하면서 나오는 애니메이션
Usage
const element = useScrollFadeIn([direction], [duration], [delay]);- direction(string): 엘리먼트가 나오는 방향 (up, down, left, right)
default value = 'up' - duration(number): 애니메이션의 총 동작 시간. second 단위
default value = 1 - delay(number): 애니메이션 지연 시간. second 단위
default value = 0
Example
const animatedItem = useScrollFadeIn('up', 1, 0);
...
// In JSX
<div {...animatedItem} />
스크롤 시 정해놓은 값까지 카운트하는 애니메이션
Usage
const element = useScrollCount([end], [start], [duration]);- end(number): 카운트가 끝나는 숫자
- duration(number): 카운트가 시작하는 숫자
default value = 0 - duration(number): 애니메이션의 총 동작 시간. second 단위
default value = 3
Example
const animatedItem = useScrollCount(200, 0, 3);
...
// In JSX
<div {...animatedItem} />
스크롤 시 특정 방향으로 펼쳐지는 애니메이션
Usage
const element = useScrollClipPath([direction], [duration], [delay]);- direction(string): 엘리먼트가 펼쳐지는 방향 (up, down, left, right)
default value = 'left' - duration(number): 애니메이션의 총 동작 시간. second 단위
default value = 1 - delay(number): 애니메이션 지연 시간. second 단위
default value = 0
Example
const animatedItem = useScrollClipPath('left', 1, 0);
...
// In JSX
<div {...animatedItem} />yarnyarn start👤 Jusung Kim
- Website: https://jusungkim.kr/
- Github: @jus0k
Give a ⭐️ if this project helped you!