16 lines
651 B
TypeScript
16 lines
651 B
TypeScript
import { useReducedMotion } from "motion/react"
|
|
|
|
// Toss 스타일 ease-out-expo 커브. 섹션 등장 애니메이션 공통.
|
|
export const EASE_OUT_EXPO: [number, number, number, number] = [0.16, 1, 0.3, 1]
|
|
|
|
/** 스크롤 진입 시 fade-up 프리셋. motion.* 컴포넌트에 스프레드해서 쓴다. */
|
|
export function useFadeUp(delay = 0) {
|
|
const shouldReduceMotion = useReducedMotion()
|
|
return {
|
|
initial: shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 48 },
|
|
whileInView: { opacity: 1, y: 0 },
|
|
viewport: { once: true, margin: "-120px" as const },
|
|
transition: { duration: 0.8, delay, ease: EASE_OUT_EXPO },
|
|
}
|
|
}
|