From 9067feaca65cfb9d9b13bf7e25a96c120a138b66 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Wed, 28 Feb 2024 18:40:50 +0500
Subject: [PATCH] animation starting

---
 .../desktop/Appartment/ImagesModal.tsx        | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/desktop/Appartment/ImagesModal.tsx b/src/components/desktop/Appartment/ImagesModal.tsx
index 7c2932a..70b1dd7 100644
--- a/src/components/desktop/Appartment/ImagesModal.tsx
+++ b/src/components/desktop/Appartment/ImagesModal.tsx
@@ -11,11 +11,20 @@ const ImagesModal = () => {
 
   useEffect(() => {
     if (!modalRef) return;
-    console.log("first");
     gsap.fromTo(
       modalRef.current,
-      { width: 0, height: 0 },
-      { width: "100vw", height: "100vh", duration: 0.3 }
+      {
+        height: 0,
+        x: "3000vw",
+      },
+      {
+        height: "100vh",
+        x: 0,
+        duration: 0.3,
+      }
+      // { x: "-200vw", y: "-200vh" },
+      // { y: "300vh" },
+      // { y: "0", duration: 0.5 }
     );
   }, []);
 
@@ -39,19 +48,19 @@ const ImagesModal = () => {
   }
 
   return (
-    <div
-      ref={modalRef}
-      className="absolute max-h-screen z-20 flex overflow-x-hidden w-screen"
-    >
+    <div className="absolute max-h-screen z-20 flex overflow-x-hidden w-screen">
       <div
-        className="flex transition-all duration-300"
+        className="flex transition-all duration-300 bg-white h-0"
+        ref={modalRef}
         style={{
+          // transform: `translateX(100vw)`,
+          // transform: `translateY(-90vh)`,
           transform: `translateX(${offset * 100}vw)`,
         }}
       >
         {currentVilla &&
           currentVilla.perspectiveWorkings.map((image) => (
-            <div className="w-screen h-screen ">
+            <div className="w-screen h-screen">
               <img
                 alt=""
                 key={image.id}
@@ -65,11 +74,11 @@ const ImagesModal = () => {
         <CrossButton onClick={handleOnClose} />
       </div>
       <BackButton
-        className="pl-[6px] pr-[6px] w-[40px] h-10 absolute left-8 top-1/2"
+        className="pl-[6px] pr-[6px] w-[40px] h-10 absolute left-8 top-[50vh]"
         onClick={handleOnLeftClick}
       />
       <BackButton
-        className="pl-[6px] pr-[6px] w-[40px] h-10 rotate absolute right-8 top-1/2 rotate-180"
+        className="pl-[6px] pr-[6px] w-[40px] h-10 rotate absolute right-8 top-[50vh] rotate-180"
         onClick={handleOnRightClick}
       />
     </div>