forked from sashaastiadi/www_mycelium_net
24 lines
547 B
TypeScript
24 lines
547 B
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { motion, useInView } from 'framer-motion'
|
|
|
|
export function AnimatedSection({ children }: { children: React.ReactNode }) {
|
|
const ref = useRef(null)
|
|
const isInView = useInView(ref, { once: false, margin: '-50% 0px -50% 0px' })
|
|
|
|
return (
|
|
<motion.section
|
|
ref={ref}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{
|
|
opacity: isInView ? 1 : 0,
|
|
y: isInView ? 0 : 50,
|
|
}}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
{children}
|
|
</motion.section>
|
|
)
|
|
}
|