30 lines
668 B
TypeScript
30 lines
668 B
TypeScript
"use client";
|
|
import React, { } from "react";
|
|
import { motion, useInView } from "framer-motion";
|
|
|
|
|
|
// Animated Section Wrapper
|
|
const AnimatedSection = ({
|
|
children,
|
|
className = "",
|
|
}: {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
const ref = React.useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
|
|
|
return (
|
|
<motion.div
|
|
ref={ref}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default AnimatedSection |