better swipe feeling

Author: xiaolin

src/components/ImageGallery.tsx

@@ -16,7 +16,6 @@ import {
   DEFAULT_SLIDE_DURATION,
   DEFAULT_SLIDE_INTERVAL,
   DEFAULT_SWIPE_THRESHOLD,
-  DEFAULT_SWIPING_TRANSITION_DURATION,
 } from "src/components/constants";
 import BottomNav from "src/components/controls/BottomNav";
 import Fullscreen from "src/components/controls/Fullscreen";
@@ -154,7 +153,6 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
       startIndex = 0,
       stopPropagation = false,
       swipeThreshold = DEFAULT_SWIPE_THRESHOLD,
-      swipingTransitionDuration = DEFAULT_SWIPING_TRANSITION_DURATION,
       thumbnailPosition = "bottom",
       useBrowserFullscreen = true,
       useTranslate3D = true,
@@ -329,7 +327,7 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
           }
 
           const swipingTransition: CSSProperties = {
-            transition: `transform ${swipingTransitionDuration}ms ease-out`,
+            transition: "none",
           };
 
           setCurrentSlideOffset(side * slideOffset);
@@ -345,7 +343,6 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
         galleryWidth,
         galleryHeight,
         slideVertically,
-        swipingTransitionDuration,
         swipingUpDown,
         swipingLeftRight,
         setCurrentSlideOffset,
@@ -354,7 +351,7 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
     );
 
     const handleOnSwipedTo = useCallback(
-      (swipeDirection: number, isFlick: boolean) => {
+      (swipeDirection: number, isFlick: boolean, velocity: number) => {
         let slideTo = currentIndex;
 
         if ((sufficientSwipe() || isFlick) && !isTransitioning) {
@@ -368,11 +365,35 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
           slideTo = currentIndex;
         }
 
-        slideToIndexCore(slideTo);
+        // Compute duration from swipe velocity so the animation continues
+        // at the same speed the user's finger was moving.
+        // velocity is in px/ms from the swipe library.
+        const swipedPercent = Math.abs(currentSlideOffset);
+        const remainingPercent =
+          slideTo !== currentIndex
+            ? 100 - swipedPercent // traveling to next/prev slide
+            : swipedPercent; // snapping back to current slide
+        const dimension = slideVertically ? galleryHeight : galleryWidth;
+        const remainingPx = (remainingPercent / 100) * dimension;
+        // Clamp: at least 80ms (not jarring), at most slideDuration
+        const velocityDuration =
+          velocity > 0
+            ? Math.min(
+                slideDuration,
+                Math.max(80, Math.round(remainingPx / velocity))
+              )
+            : slideDuration;
+
+        slideToIndexCore(slideTo, undefined, false, velocityDuration);
       },
       [
         currentIndex,
+        currentSlideOffset,
         isTransitioning,
+        slideDuration,
+        slideVertically,
+        galleryWidth,
+        galleryHeight,
         sufficientSwipe,
         canSlideLeft,
         canSlideRight,
@@ -399,7 +420,7 @@ const ImageGallery = forwardRef<ImageGalleryRef, ImageGalleryProps>(
 
         const isFlick = slideVertically ? isTopDownFlick : isLeftRightFlick;
 
-        handleOnSwipedTo(swipeDirection, isFlick);
+        handleOnSwipedTo(swipeDirection, isFlick, velocity);
       },
       [
         disableSwipe,

src/components/constants.ts

@@ -6,9 +6,6 @@
 // Animation & Timing
 export const DEFAULT_SLIDE_DURATION = 550;
 export const DEFAULT_SLIDE_INTERVAL = 3000;
-// Must be 0 for responsive finger tracking - the swipe offset is updated continuously
-// by the swipe library, so any transition would cause the image to lag behind the finger
-export const DEFAULT_SWIPING_TRANSITION_DURATION = 0;
 
 // Thresholds
 export const DEFAULT_FLICK_THRESHOLD = 0.4;

src/components/hooks/useGalleryNavigation.ts

@@ -48,7 +48,8 @@ interface UseGalleryNavigationReturn {
   slideToIndexCore: (
     index: number,
     event?: React.SyntheticEvent | Event,
-    isPlayPause?: boolean
+    isPlayPause?: boolean,
+    customDuration?: number
   ) => void;
   slideToIndexWithStyleReset: (
     nextIndex: number,
@@ -193,10 +194,12 @@ export function useGalleryNavigation({
     (
       index: number,
       _event?: React.SyntheticEvent | Event,
-      isPlayPause = false
+      isPlayPause = false,
+      customDuration?: number
     ): void => {
       if ((isTransitioning || isJumpingRef.current) && !isPlayPause) return;
 
+      const duration = customDuration ?? slideDuration;
       const slideCount = totalSlides - 1;
       let nextIndex = index;
       let nextDisplayIndex: number;
@@ -238,7 +241,7 @@ export function useGalleryNavigation({
       setIsTransitioning(nextIndex !== currentIndex || willWrap);
       setCurrentSlideOffset(0);
       setSlideStyle({
-        transition: `transform ${slideDuration}ms ${DEFAULT_EASING}`,
+        transition: `transform ${duration}ms ${DEFAULT_EASING}`,
       });
 
       // Schedule clone jump if we're wrapping in infinite mode
@@ -251,7 +254,7 @@ export function useGalleryNavigation({
           // Jump to the real slide after animation completes
           const realDisplayIndex = realToDisplayIndex(nextIndex);
           handleCloneJump(nextIndex, realDisplayIndex);
-        }, slideDuration + 20);
+        }, duration + 20);
       }
     },
     [