사용법
스크롤해서 아래 블록이 뷰포트에 들어오면 애니메이션이 시작돼요.
위에서 등장
이미지와 함께 reveal
scale + mesh backdrop
인터페이스
ScrollRevealProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| direction | "up" | "down" | "left" | "right" | "fade" | "scale" | up | 등장 방향 |
| delay | number | 0 | 지연(ms) |
| duration | number | 700 | 애니메이션 길이(ms) |
| distance | number | 32 | 이동 거리(px) |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
ScrollReveal 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { ScrollReveal } from "@goldtreedev/ui";