1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import { motion, useInView } from "framer-motion";
import { useRef } from "react";
export function FadeIn({
children,
className,
noVertical,
delay,
viewTriggerOffset,
}: {
children: React.ReactNode;
className?: string;
noVertical?: boolean;
delay?: number;
viewTriggerOffset?: boolean;
}) {
const ref = useRef(null);
const inView = useInView(ref, {
once: true,
margin: viewTriggerOffset ? "-128px" : "0px",
});
const fadeUpVariants = {
initial: {
opacity: 0,
y: noVertical ? 0 : 24,
},
animate: {
opacity: 1,
y: 0,
},
};
return (
<motion.div
ref={ref}
animate={inView ? "animate" : "initial"}
variants={fadeUpVariants}
className={className}
initial={false}
transition={{
duration: 1,
delay: delay || 0,
ease: [0.21, 0.47, 0.32, 0.98],
}}
>
{children}
</motion.div>
);
}
|