animation starting

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>