라이브러리
[motion] 뷰포트 감지 훅(useInView) 사용 방법
순코딩
2025. 4. 27. 18:06
import { motion, useInView } from "motion/react";
import { ReactNode, useRef } from "react";
export const AnimationBlock = () => {
const inViewRef = useRef(null);
const isInView = useInView(inViewRef);
// 다른 모든 애니메이션 타입
return (
<div ref={inViewRef}>
<motion.div
key={...}
initial="..."
animate={isInView ? "visible" : "hidden"}
variants={...}
transition={....}
>
안뇽✨
{isInView ? "visible" : "hidden"}
</motion.div>
</div>
);
};