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/FullView.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
+import { useState } from "react"
 
 import ArrowRightIcon from "@/components/Icons/ArrowRight"
 import CloseIcon from "@/components/Icons/Close"
@@ -20,10 +21,35 @@ export default function FullView({
   currentIndex,
   totalImages,
 }: FullViewProps) {
+  const [animateLeft, setAnimateLeft] = useState(true)
+
   function handleSwipe(offset: number) {
     if (offset > 30) onPrev()
     if (offset < -30) onNext()
   }
+
+  function handleNext() {
+    setAnimateLeft(true)
+    onNext()
+  }
+
+  function handlePrev() {
+    setAnimateLeft(false)
+    onPrev()
+  }
+
+  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.fullViewContainer}>
       <Button
@@ -48,13 +74,14 @@ export default function FullView({
         </span>
       </div>
       <div className={styles.fullViewImageContainer}>
-        <AnimatePresence initial={false} custom={currentIndex}>
+        <AnimatePresence initial={false} custom={animateLeft}>
           <motion.div
             key={image.imageSizes.medium}
-            custom={currentIndex}
-            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 }}
             className={styles.fullViewImage}
             drag="x"
@@ -78,13 +105,13 @@ export default function FullView({
 
       <motion.button
         className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
-        onClick={onPrev}
+        onClick={handlePrev}
       >
         <ArrowRightIcon color="burgundy" className={styles.leftTransformIcon} />
       </motion.button>
       <motion.button
         className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
-        onClick={onNext}
+        onClick={handleNext}
       >
         <ArrowRightIcon color="burgundy" />
       </motion.button>