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>
);
};
'라이브러리' 카테고리의 다른 글
[ts-particle] 버블 애니메이션 컴포넌트 예시 코드(버블 프리셋 적용) (0) | 2025.04.27 |
---|---|
dayjs 사용방법 | 시간을 년월일로 변경하는 방법 (0) | 2025.04.10 |
[Firebase] FCM을 활용한 웹 푸쉬 알림 구현방법 A to Z (1) | 2025.04.01 |
OpenAI API(GPT) 사용법 (0) | 2025.03.30 |
[react-swiper] 스와이퍼 범위가 무한히 늘어나는 버그 | 스크롤바가 무한히 늘어나는 원인 및 해결방법 (0) | 2025.02.23 |