Fix: Image Object positioning and improved performance

src/components/Slideshow.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import spain from "../assets/spain-large.jpg";
 import sky from "../assets/sky-large.jpg";
@@ -12,15 +12,15 @@ import flower from "../assets/flower1-large.jpg";
 import snorkling from "../assets/snorkling-large.jpg";
 
 const imageSources = [
-  { src: spain, alt: "Festival in Spain" },
-  { src: sky, alt: "Sky" },
-  { src: gymnasium, alt: "Gymnasium" },
-  { src: cheeta, alt: "Cheeta" },
-  { src: cheeta1, alt: "Cheeta" },
-  { src: flowerSouthAfrica, alt: "Flower" },
-  { src: chameleon, alt: "Chameleon" },
-  { src: crocodile, alt: "Crocodile" },
-  { src: flower, alt: "Flower" },
+  { src: cheeta, alt: "South Africa 2015" },
+  { src: cheeta1, alt: "South Africa 2015" },
+  { src: crocodile, alt: "South Africa 2015" },
+  { src: flower, alt: "Lesotho 2015" },
+  { src: flowerSouthAfrica, alt: "Lesotho 2015" },
+  { src: chameleon, alt: "Madagaskar 2017" },
+  { src: sky, alt: "Sarek 2017" },
+  { src: spain, alt: "Spain 2019" },
+  { src: gymnasium, alt: "Gymnasium 2019" },
   { src: snorkling, alt: "Snorkling" },
 ];
 
@@ -38,6 +38,27 @@ function Slideshow({ className }: { className?: string }) {
   };
   const onTouchEnd = onMouseUp;
 
+  useEffect(() => {
+    const images = track.current?.querySelectorAll("img") ?? [];
+    images.forEach((image) => {
+      image.animate(
+        {
+          objectPosition: `${getImageObjectPosition(image)}% center`, // Move from right (100%) to left (0%)
+        },
+        { duration: 1200, fill: "forwards" }
+      );
+    });
+  }, [])
+
+  function getImageObjectPosition(image: HTMLImageElement) {
+    const { width, x } = image.getBoundingClientRect();
+
+    // Calculate rect center and percentage
+    const rectCenterX = x + width / 2;
+
+    return Math.max(Math.min((rectCenterX / window.innerWidth) * 100, 100), 0);
+  }
+
   const handlePointerMove = useCallback((clientX: number) => {
     const curr = track.current;
     if (mouseDownAt === 0 || !curr) return;
@@ -56,14 +77,20 @@ function Slideshow({ className }: { className?: string }) {
       { duration: 1200, fill: "forwards" }
     );
 
-    images.forEach((image) => {
+
+
+    for (const image of images) {
+      const { left, right } = image.getBoundingClientRect();
+      // Early return if the image is fully outside the viewport
+      if (left > window.innerWidth || right < 0) continue;
+
       image.animate(
         {
-          objectPosition: `${100 + nextPercentage}% center`,
+          objectPosition: `${getImageObjectPosition(image)}% center`, // Move from right (100%) to left (0%)
         },
         { duration: 1200, fill: "forwards" }
       );
-    });
+    }
 
     setSlide(nextPercentage)
   }, [mouseDownAt, prevSlide]);
@@ -77,6 +104,7 @@ function Slideshow({ className }: { className?: string }) {
 
   return (
     <div
+      style={{ willChange: "auto" }}
       className={twMerge("absolute top-1/2 left-1/2 -translate-y-1/2", className)}
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
@@ -88,7 +116,7 @@ function Slideshow({ className }: { className?: string }) {
     >
       <div ref={track} style={{ width: "max-content" }} className="flex reveal gap-[4vmin] select-none">
         {imageSources.map(({ src, alt }) => (
-          <div className=" relative group" key={src}>
+          <div className="relative group" key={src}>
             <img
               style={{ objectPosition: "100% center", willChange: "auto" }}
               className="w-[40vmin] min-w-52 aspect-[5/7] object-cover"
@@ -97,7 +125,7 @@ function Slideshow({ className }: { className?: string }) {
               draggable="false"
               loading="lazy"
             />
-            <div className="absolute left-0 right-0 text-center opacity-0 group-hover:opacity-100 duration-1000 ease-in-out">
+            <div className="absolute inset-x-0 text-center opacity-0 group-hover:opacity-100 duration-1000 ease-in-out">
               <h2>{alt}</h2>
             </div>
           </div>