33 lines
765 B
TypeScript
33 lines
765 B
TypeScript
import React from "react"
|
|
import { motion, useAnimation } from "framer-motion"
|
|
import { useInView } from "react-intersection-observer"
|
|
|
|
const AnimatedDiv = () => {
|
|
const controls = useAnimation()
|
|
const { ref, inView } = useInView()
|
|
|
|
React.useEffect(() => {
|
|
if (inView) {
|
|
controls.start("visible")
|
|
} else {
|
|
controls.start("hidden")
|
|
}
|
|
}, [controls, inView])
|
|
|
|
return (
|
|
<div className="flex h-screen items-center justify-center">
|
|
<motion.div
|
|
ref={ref}
|
|
initial="hidden"
|
|
animate={controls}
|
|
variants={{
|
|
visible: { scale: 1, opacity: 1 },
|
|
hidden: { scale: 0, opacity: 0 },
|
|
}}
|
|
transition={{ duration: 0.5 }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AnimatedDiv
|