23 lines
563 B
TypeScript
23 lines
563 B
TypeScript
import { useRef } from 'react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
|
|
|
|
return (
|
|
<motion.section
|
|
id={id}
|
|
ref={ref}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{
|
|
opacity: isInView ? 1 : 0,
|
|
y: isInView ? 0 : 50,
|
|
}}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{children}
|
|
</motion.section>
|
|
)
|
|
}
|