React Hooks로 스크롤 애니메이션 구현하기 A tiny set of React hooks for scroll-triggered animations — fade in, count up, clip-path reveal.

✨ Demo

Install

npm install scroll-hooks
# or
yarn add scroll-hooks
# or
pnpm add scroll-hooks

react@^16.8.0 || ^17 || ^18 || ^19 is a peer dependency.

Hooks

useScrollFadeIn

스크롤 시 특정 방향에서 Fade In 하면서 나오는 애니메이션.

import { useScrollFadeIn } from 'scroll-hooks';

function Hero() {
  const animatedItem = useScrollFadeIn('up', 1, 0);
  return <div {...animatedItem}>Hello</div>;
}

| Param | Type | Default | Description | |---|---|---|---| | direction | 'up' \| 'down' \| 'left' \| 'right' | 'up' | 엘리먼트가 나오는 방향 | | duration | number | 1 | 애니메이션 시간 (초) | | delay | number | 0 | 애니메이션 지연 (초) |

useScrollCount

스크롤 시 정해놓은 값까지 카운트하는 애니메이션. 카운트다운(end < start)도 지원합니다.

import { useScrollCount } from 'scroll-hooks';

function Stats() {
  const counter = useScrollCount(630);
  return <span {...counter}>0</span>;
}

| Param | Type | Default | Description | |---|---|---|---| | end | number | — | 카운트가 끝나는 숫자 (필수) | | start | number | 0 | 카운트가 시작하는 숫자 | | duration | number | 3 | 애니메이션 시간 (초) |

useScrollClipPath

스크롤 시 특정 방향으로 펼쳐지는 애니메이션. 부모 노드를 기준으로 동작하므로 컨테이너 안에 감싸서 사용하세요.

import { useScrollClipPath } from 'scroll-hooks';

function Banner() {
  const animatedItem = useScrollClipPath('left', 1, 0);
  return (
    <div className="container">
      <img {...animatedItem} src="/hero.jpg" alt="" />
    </div>
  );
}

| Param | Type | Default | Description | |---|---|---|---| | direction | 'up' \| 'down' \| 'left' \| 'right' | 'left' | 펼쳐지는 방향 | | duration | number | 1 | 애니메이션 시간 (초) | | delay | number | 0 | 애니메이션 지연 (초) |

TypeScript

타입 정의는 패키지에 포함되어 있어 별도 설치가 필요하지 않습니다. 모든 hook은 generic으로 element 타입을 받을 수 있습니다.

import { useScrollFadeIn } from 'scroll-hooks';

const heading = useScrollFadeIn<HTMLHeadingElement>('up', 1, 0);

Local development

git clone https://github.com/jus0k/scroll-hooks.git
cd scroll-hooks
npm install
npm run build

cd example
npm install
npm start

Author

👤 Jusung Kim

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

Show your support

Give a ⭐️ if this project helped you!

License

MIT © Jusung Kim