diff --git a/i18n/en.json b/i18n/en.json
index 1dbd50e294..c555706ba8 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -2022,6 +2022,9 @@
"skip_to_folders": "Skip to folders",
"skip_to_tags": "Skip to tags",
"slideshow": "Slideshow",
+ "slideshow_animate": "Animate slideshow",
+ "slideshow_animate_pan_strength": "Pan strength percentage",
+ "slideshow_animate_zoom_strength": "Zoom strength percentage",
"slideshow_body": "Sit back and watch your photos play in a full-screen slideshow.",
"slideshow_metadata_overlay_mode": "Overlay content",
"slideshow_metadata_overlay_mode_description_only": "Description only",
diff --git a/web/src/lib/modals/SlideshowSettingsModal.svelte b/web/src/lib/modals/SlideshowSettingsModal.svelte
index 6540f63124..f355bdda3b 100644
--- a/web/src/lib/modals/SlideshowSettingsModal.svelte
+++ b/web/src/lib/modals/SlideshowSettingsModal.svelte
@@ -22,6 +22,9 @@
const {
slideshowDelay,
showProgressBar,
+ slideshowAnimate,
+ slideshowAnimatePanStrength,
+ slideshowAnimateZoomStrength,
slideshowNavigation,
slideshowLook,
slideshowTransition,
@@ -41,6 +44,9 @@
// Temporary variables to hold the settings - marked as reactive with $state() but initialized with store values
let tempSlideshowDelay = $state($slideshowDelay);
let tempShowProgressBar = $state($showProgressBar);
+ let tempSlideshowAnimate = $state($slideshowAnimate);
+ let tempSlideshowAnimatePanStrength = $state($slideshowAnimatePanStrength);
+ let tempSlideshowAnimateZoomStrength = $state($slideshowAnimateZoomStrength);
let tempSlideshowNavigation = $state($slideshowNavigation);
let tempSlideshowLook = $state($slideshowLook);
let tempSlideshowTransition = $state($slideshowTransition);
@@ -84,6 +90,9 @@
const onSubmit = () => {
$slideshowDelay = tempSlideshowDelay;
$showProgressBar = tempShowProgressBar;
+ $slideshowAnimate = tempSlideshowAnimate;
+ $slideshowAnimatePanStrength = tempSlideshowAnimatePanStrength;
+ $slideshowAnimateZoomStrength = tempSlideshowAnimateZoomStrength;
$slideshowNavigation = tempSlideshowNavigation;
$slideshowLook = tempSlideshowLook;
$slideshowTransition = tempSlideshowTransition;
@@ -151,5 +160,15 @@
{$t('admin.slideshow_duration_description')}
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/lib/stores/slideshow.store.ts b/web/src/lib/stores/slideshow.store.ts
index 17ba266ee1..e6417b53ee 100644
--- a/web/src/lib/stores/slideshow.store.ts
+++ b/web/src/lib/stores/slideshow.store.ts
@@ -42,6 +42,9 @@ function createSlideshowStore() {
const slideshowState = writable(SlideshowState.None);
const showProgressBar = persisted('slideshow-show-progressbar', true);
+ const slideshowAnimate = persisted('slideshow-animate', false);
+ const slideshowAnimatePanStrength = persisted('slideshow-animate-pan-strength', 50, {});
+ const slideshowAnimateZoomStrength = persisted('slideshow-animate-zoom-strength', 50, {});
const slideshowDelay = persisted('slideshow-delay', 5, {});
const slideshowTransition = persisted('slideshow-transition', true);
const slideshowAutoplay = persisted('slideshow-autoplay', true, {});
@@ -89,6 +92,9 @@ function createSlideshowStore() {
slideshowRepeat,
slideshowShowMetadataOverlay,
slideshowMetadataOverlayMode,
+ slideshowAnimate,
+ slideshowAnimatePanStrength,
+ slideshowAnimateZoomStrength,
};
}