Dont show fade in on mobile and adjust padding

Vizzuality · Oct 24, 2024 · 35a7303 · 35a7303
1 parent 69e34ca
commit 35a7303
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/animations/fade-in.tsx b/src/components/animations/fade-in.tsx
@@ -1,9 +1,14 @@
 import { motion, AnimatePresence, useInView } from "framer-motion";
 import { useRef, FC } from "react";
+import { useIsMobile } from "@/lib/hooks";
 
 const FadeIn: FC<{ children: React.ReactNode, delay?: number }> = ({ children, delay }) => {
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true });
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return children;
+  }
 
   return (
     <AnimatePresence>

diff --git a/src/components/section-2/index.tsx b/src/components/section-2/index.tsx
@@ -88,7 +88,7 @@ export default function Section2() {
 
   const isMobile = useIsMobile();
 
-  const titleX = useTransform(scrollYProgress, [0.2, 0.33], [0, isMobile ? -30 : -200]);
+  const titleX = useTransform(scrollYProgress, [0.2, 0.33], [0, isMobile ? 0 : -200]);
   const titleY = useTransform(scrollYProgress, [0.2, 0.33], [0, isMobile ? -180 : -204]);
   const descriptionY = useTransform(scrollYProgress, [0.2, 0.33, 0.6, 0.7], [1000, isMobile ? -120 : -210, isMobile ? -120 : -210, -1000]);
 
@@ -194,7 +194,7 @@ export default function Section2() {
                     'opacity-100': globePhase === 1
                   }
                 )}
-                style={{ y: descriptionY, x: isMobile ? -30 : 495 }}
+                style={{ y: descriptionY, x: isMobile ? 0 : 495 }}
                 ref={descriptionRef}
               >
                 {isMobile && <div className="absolute right-0 -top-8 items-center gap-0.5 flex">