64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React, { useRef, useEffect } from "react";
|
|
import { motion, useInView, useAnimation } from "framer-motion";
|
|
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const RevealR = ({ children }: Props) => {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: false });
|
|
const mainControls = useAnimation();
|
|
const slideControls = useAnimation();
|
|
|
|
useEffect(() => {
|
|
if (isInView) {
|
|
mainControls.start("visible");
|
|
slideControls.start("visible");
|
|
} else {
|
|
mainControls.start("hidden");
|
|
}
|
|
}, [isInView]);
|
|
|
|
return (
|
|
<div ref={ref} className="relative overflow-hidden">
|
|
<motion.div
|
|
variants={{
|
|
hidden: { opacity: 0, x: 75 },
|
|
visible: { opacity: 1, x: 0 },
|
|
}}
|
|
initial="hidden"
|
|
animate={mainControls}
|
|
transition={{
|
|
duration: 1,
|
|
delay: 0.1,
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
|
|
{/* Optional: Slide Overlay Animation */}
|
|
{/*
|
|
<motion.div
|
|
variants={{
|
|
hidden: { left: 0 },
|
|
visible: { left: "100%" },
|
|
}}
|
|
initial="hidden"
|
|
animate={slideControls}
|
|
transition={{ duration: 0.5, ease: "easeIn" }}
|
|
style={{
|
|
position: "absolute",
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 0,
|
|
right: 0,
|
|
background: "#5e84ff",
|
|
zIndex: 20,
|
|
}}
|
|
/>
|
|
*/}
|
|
</div>
|
|
);
|
|
};
|