Framer 중앙에서 노출되는 variant

const variants: Variants = {
  hidden: {
    y: 20,
    opacity: 0,
  },
  visible: {
    y: 0,
    opacity: 1,
  },
}
 
const ref = useRef<HTMLDivElement | null>(null)
const isInView = useInView(ref, { margin: '0px 0px -50% 0px', once: true })
 
 
<motion.div
  ref={ref}
  initial="hidden"
  animate={isInView ? 'visible' : 'hidden'}
  variants={variants}
  transition={{ duration: 0.8 }}
/>