59 lines
1.4 KiB
TypeScript
59 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 Reveal = ({ 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}>
|
||
|
|
<motion.div
|
||
|
|
variants={{
|
||
|
|
hidden: { opacity: 0, y: 75 },
|
||
|
|
visible: { opacity: 1, y: 0 },
|
||
|
|
}}
|
||
|
|
initial="hidden"
|
||
|
|
animate={mainControls}
|
||
|
|
transition={{
|
||
|
|
duration: 1,
|
||
|
|
delay: 0.1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
{/* TODO green slide thingy */}
|
||
|
|
{/* <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>
|
||
|
|
);
|
||
|
|
};
|