Welcome to Scroll Hooks 👋

React Hooks로 스크롤 애니메이션 구현하기

✨ Demo

Scroll Hooks

스크롤 시 동작하는 Fade In, Count, Clip Path 애니메이션을 React Hooks로 구현

useScrollFadeIn

스크롤 시 특정 방향에서 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} />

useScrollCount

스크롤 시 정해놓은 값까지 카운트하는 애니메이션

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} />

useScrollClipPath

스크롤 시 특정 방향으로 펼쳐지는 애니메이션

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} />

Install

yarn

Usage

yarn start

Author

👤 Jusung Kim

• Website: https://jusungkim.kr/
• Github: @jus0k

Show your support

Give a ⭐️ if this project helped you!