Merged in fix/sw-1127-image-fixes (pull request #1123)

Fix/sw-1127 image fixes for lightbox

* fix(SW-1127): move back to top button behind lightbox

* fix(SW-1127): don't loop lightbox thumbnails

* fix(SW-1127): nicer animation in the gallery

This both fixes a bug in the gallery where the animation in the carousel
didn't work so good and also animates the images different directions
depending on if the user go left or right.


Approved-by: Matilda Landström

components/Lightbox/Gallery.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { ChevronLeftIcon } from "@/components/Icons"
@@ -21,12 +22,13 @@ export default function Gallery({
   selectedImage,
 }: GalleryProps) {
   const intl = useIntl()
+  const [animateLeft, setAnimateLeft] = useState(true)
   const mainImage = selectedImage || images[0]
   const mainImageIndex = images.findIndex((img) => img === mainImage)
 
   function getThumbImages() {
     const thumbs = []
-    for (let i = 1; i <= 5; i++) {
+    for (let i = 1; i <= Math.min(5, images.length); i++) {
       const index = (mainImageIndex + i) % images.length
       thumbs.push(images[index])
     }
@@ -34,15 +36,29 @@ export default function Gallery({
   }
 
   function handleNext() {
+    setAnimateLeft(true)
     const nextIndex = (mainImageIndex + 1) % images.length
     onSelectImage(images[nextIndex])
   }
 
   function handlePrev() {
+    setAnimateLeft(false)
     const prevIndex = (mainImageIndex - 1 + images.length) % images.length
     onSelectImage(images[prevIndex])
   }
 
+  const variants = {
+    initial: (animateLeft: boolean) => ({
+      opacity: 0,
+      x: animateLeft ? 300 : -300,
+    }),
+    animate: { opacity: 1, x: 0 },
+    exit: (animateLeft: boolean) => ({
+      opacity: 0,
+      x: animateLeft ? -300 : 300,
+    }),
+  }
+
   return (
     <div className={styles.galleryContainer}>
       <Button
@@ -72,13 +88,15 @@ export default function Gallery({
           )}
         </div>
         <div className={styles.mainImageWrapper}>
-          <AnimatePresence initial={false} mode="wait">
+          <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
               key={mainImage.imageSizes.medium}
               className={styles.mainImageContainer}
-              initial={{ opacity: 0, x: 300 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -300 }}
+              custom={animateLeft}
+              variants={variants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
               transition={{ duration: 0.3 }}
             >
               <Image