From 4838df315931bb883f704ec3e1abe2685f296cdf Mon Sep 17 00:00:00 2001
From: HsiangNianian <admin@jyunko.cn>
Date: Sat, 22 Apr 2023 19:52:26 +0800
Subject: 😀
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/pages/home-shared/FadeIn.tsx | 50 ++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 docs/components/pages/home-shared/FadeIn.tsx

(limited to 'docs/components/pages/home-shared/FadeIn.tsx')

diff --git a/docs/components/pages/home-shared/FadeIn.tsx b/docs/components/pages/home-shared/FadeIn.tsx
new file mode 100644
index 0000000..826a078
--- /dev/null
+++ b/docs/components/pages/home-shared/FadeIn.tsx
@@ -0,0 +1,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>
+  );
+}
-- 
cgit v1.2.3-70-g09d2