zoom and translate without framer, clouds animation with framer (without direction)

src/components/Map.tsx

@@ -2,11 +2,10 @@
 import {
   AnimatePresence,
   motion,
-  useMotionValue,
-  useSpring,
   animate,
-  useTransform,
   AnimationPlaybackControlsWithThen,
+  useTransform,
+  useMotionValue,
 } from "motion/react";
 import clsx from "clsx";
 import { useRef, useState, useEffect } from "react";
@@ -150,43 +149,40 @@ function Map({ maxZoom = 1 }: MapProps) {
     if (marker !== null) setLastHoveredMarker(marker);
   };
 
-  // const cloudsTranslateX = useMotionValue(0);
+  const cloudsTranslateX = useMotionValue(0);
+  // const cloudsTranslateY = useMotionValue(0);
 
-  // // const cloudsTranslateY = useMotionValue(0);
+  const cloudsX = useTransform(
+    () =>
+      cloudsTranslateX.get() * zoom +
+      //  *
+      //     Math.cos(((-90 - windDirection) / 180) * Math.PI)
+      position.x
+  );
 
-  // const cloudsX = useTransform(
-  //   () => motionXValue.get() + cloudsTranslateX.get() * motionZoomValue.get()
-  //   //  *
-  //   // Math.cos(((-90 - windDirection) / 180) * Math.PI)
-  // );
+  const cloudsY = useTransform(
+    () => position.y
+    //  +
+    //   cloudsTranslateY.get() *
+    //     zoom *
+    //     Math.sin(((-90 - windDirection) / 180) * Math.PI)
+  );
 
-  // const cloudsY = useTransform(
-  //   () => motionYValue.get()
-  //   // +
-  //   //   cloudsTranslateY.get() *
-  //   //     motionZoomValue.get() *
-  //   //     Math.sin(((-90 - windDirection) / 180) * Math.PI)
-  // );
+  useEffect(() => {
+    if (!cloudsRef.current) return;
+    const animation = animate(
+      cloudsTranslateX,
+      [-cloudsRef.current.clientWidth, 0],
+      {
+        duration: Math.round(3000 / windSpeed),
+        repeat: Infinity,
+        repeatDelay: 0,
+        ease: "linear",
+      }
+    );
 
-  // // useEffect(()=>{
-  // //   const animation = animate(x,position.x,{duration:})
-  // // },[])
-
-  // useEffect(() => {
-  //   if (!cloudsRef.current) return;
-  //   const animation = animate(
-  //     cloudsTranslateX,
-  //     [-cloudsRef.current.clientWidth, 0],
-  //     {
-  //       duration: Math.round(3000 / windSpeed),
-  //       repeat: Infinity,
-  //       repeatDelay: 0,
-  //       ease: "linear",
-  //     }
-  //   );
-
-  //   return animation.stop;
-  // }, [cloudsTranslateX, windSpeed]);
+    return animation.stop;
+  }, [cloudsTranslateX, windSpeed]);
 
   // useEffect(() => {
   //   if (!cloudsRef.current) return;
@@ -310,7 +306,11 @@ function Map({ maxZoom = 1 }: MapProps) {
 
   useEffect(() => {
     if (!zoom) return;
-    setOpacityCloud(Math.abs(((maxZoom - zoom) / maxZoom) * 0.8));
+    const opacity =
+      maxZoom === minZoomRef.current
+        ? 1
+        : (maxZoom - zoom) / (maxZoom - minZoomRef.current);
+    setOpacityCloud(opacity);
   }, [zoom]);
 
   const getContainerSize = (): Size => containerSizeRef.current;
@@ -454,9 +454,7 @@ function Map({ maxZoom = 1 }: MapProps) {
     }
   };
 
-  const handleEnd = () => {
-    setIsDragging(false);
-  };
+  const handleEnd = () => setIsDragging(false);
 
   const handleTouchEnd = () => {
     setIsDragging(false);
@@ -613,18 +611,20 @@ function Map({ maxZoom = 1 }: MapProps) {
   };
 
   const cloudStyle = {
-    transform: `translateX(${position.x}px) translateY(${position.y}px) scale(${zoom})`,
+    x: cloudsX,
+    y: cloudsY,
+    scale: zoom,
     ...originalSize,
     transformOrigin: "0 0",
     opacity: opacityCloud,
-    animationDuration: `${Math.round(3000 / windSpeed)}s`,
   };
 
   useEffect(() => {
     getWeather().then((data) => {
       setTemperature(Math.round(data.temperature2m));
       setWindSpeed(Math.round(data.windSpeed180m));
-      setWindDirection(Math.round(data.windDirection180m));
+      setWindDirection(45);
+      // setWindDirection(Math.round(data.windDirection180m));
     });
   }, []);
 
@@ -692,17 +692,9 @@ function Map({ maxZoom = 1 }: MapProps) {
         />
       )}
 
-      <div
+      <motion.div
         style={cloudStyle}
         ref={cloudsRef}
-        // initial={{ x: -100 }}
-        // animate={{ x: 0 }}
-        // transition={{
-        //   // repeatType: "loop",
-        //   repeat: Infinity,
-        //   repeatDelay: 0,
-        //   duration: Math.round(3000 / windSpeed),
-        // }}
         className={clsx(
           `absolute w-full h-full pointer-events-none flex transition-[opacity] will-change-[opacity,scale,translate,transform]`,
           hoveredMarker && "opacity-80"
@@ -720,7 +712,7 @@ function Map({ maxZoom = 1 }: MapProps) {
           }.png`}
           className="w-full"
         />
-      </div>
+      </motion.div>
 
       <div
         className={clsx(