Fix Page Transition and Mobile Version.

src/components/PageTransition.tsx

@@ -1,11 +1,10 @@
 "use client"
-import type React from "react"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { motion, AnimatePresence, cubicBezier } from "framer-motion"
 import { useLocation } from "react-router-dom"
 
 interface PageTransitionProps {
-  children: React.ReactNode
+    children: React.ReactNode
 }
 
 const customEase = cubicBezier(0.25, 0.1, 0.25, 1)
@@ -14,113 +13,83 @@ const Logo = () => (
     <motion.div
         initial={{ opacity: 0, scale: 0.8 }}
         animate={{
-          opacity: 1,
-          scale: 1,
-          transition: { duration: 0.3, ease: customEase },
+            opacity: 1,
+            scale: 1,
+            transition: { duration: 0.4, ease: customEase },
         }}
         exit={{
-          opacity: 0,
-          scale: 1.2,
-          transition: { duration: 0.3, ease: customEase },
+            opacity: 0,
+            scale: 1.2,
+            transition: { duration: 0.3, ease: customEase },
         }}
         className="w-16 h-16"
     >
-      <img
-          src="/logo.png"
-          alt="Logo"
-          className="w-full h-full object-contain filter brightness-200"
-      />
+        <img
+            src="/logo.png"
+            alt="Logo"
+            className="w-full h-full object-contain filter brightness-200"
+        />
     </motion.div>
 )
 
 const PageTransition = ({ children }: PageTransitionProps) => {
-  const location = useLocation()
-  const [isTransitioning, setIsTransitioning] = useState(true)
-  const [isOverlayActive, setIsOverlayActive] = useState(true)
+    const location = useLocation()
+    const [isAnimating, setIsAnimating] = useState(false)
+    const [showContent, setShowContent] = useState(true)
 
-  useEffect(() => {
-    setIsTransitioning(true)
-    setIsOverlayActive(true)
+    useEffect(() => {
+        setIsAnimating(true)
+        setShowContent(false)
 
-    const overlayTimer = setTimeout(() => {
-      setIsOverlayActive(false)
-    }, 1200) // Overlay animation duration
+        const contentTimer = setTimeout(() => {
+            setShowContent(true)
+        }, 800)
 
-    const transitionTimer = setTimeout(() => {
-      setIsTransitioning(false)
-    }, 800)
+        const animationTimer = setTimeout(() => {
+            setIsAnimating(false)
+        }, 1000)
 
-    return () => {
-      clearTimeout(overlayTimer)
-      clearTimeout(transitionTimer)
-    }
-  }, [location])
+        return () => {
+            clearTimeout(contentTimer)
+            clearTimeout(animationTimer)
+        }
+    }, [location.pathname])
 
-  return (
-      <AnimatePresence mode="wait">
-        <motion.div key={location.pathname} className="relative">
-          {/* Transition Container */}
-          <div className={`fixed inset-0 pointer-events-none ${isOverlayActive ? 'z-50' : '-z-10'}`}>
-            {/* Overlay Animation */}
-            <motion.div
-                className="absolute inset-0 bg-zinc-900"
-                initial={{ opacity: 0 }}
-                animate={{
-                  opacity: [0, 1, 1, 0],
-                  transition: {
-                    duration: 1.2,
-                    times: [0, 0.3, 0.7, 1],
-                    ease: customEase,
-                  },
-                }}
-            />
-
-            {/* Logo */}
+    return (
+        <div className="relative min-h-screen bg-zinc-900">
+            {/* Overlay mit Logo */}
             <AnimatePresence>
-              {isTransitioning && (
-                  <motion.div
-                      className="absolute inset-0 flex items-center justify-center"
-                      initial={{ opacity: 0 }}
-                      animate={{
-                        opacity: 1,
-                        transition: {
-                          delay: 0.3,
-                          duration: 0.3,
-                        },
-                      }}
-                      exit={{
-                        opacity: 0,
-                        transition: {
-                          duration: 0.3,
-                        },
-                      }}
-                  >
-                    <Logo />
-                  </motion.div>
-              )}
+                {isAnimating && (
+                    <motion.div
+                        key="overlay"
+                        className="fixed inset-0 z-[60] bg-zinc-900 flex items-center justify-center"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        <Logo />
+                    </motion.div>
+                )}
             </AnimatePresence>
-          </div>
 
-          {/* Page Content */}
-          <motion.div
-              className="relative"
-              initial={{ opacity: 0, y: 20 }}
-              animate={{
-                opacity: 1,
-                y: 0,
-                transition: {
-                  duration: 0.4,
-                  delay: 0.8,
-                  ease: customEase,
-                },
-              }}
-              exit={{ opacity: 0, y: -20, transition: { duration: 0.3 } }}
-          >
-            {children}
-          </motion.div>
-        </motion.div>
-      </AnimatePresence>
-  )
+            {/* Content */}
+            <AnimatePresence mode="wait">
+                {showContent && (
+                    <motion.div
+                        key={location.pathname}
+                        className="relative z-0"
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        {children}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    )
 }
 
 export default PageTransition