delay in animation

src/pages/viewer/utils/dataTransformer.ts

@@ -45,6 +45,7 @@ type ViewerDataPage = {
     tableData?: TableData;
     entranceAnimation?: EditorObject["entranceAnimation"];
     entranceDurationMs?: number;
+    entranceDelayMs?: number;
   }>;
 };
 
@@ -142,6 +143,9 @@ export function transformViewerDataToPages(data: ViewerData): PageData[] {
       if (obj.entranceDurationMs !== undefined) {
         baseObject.entranceDurationMs = obj.entranceDurationMs;
       }
+      if (obj.entranceDelayMs !== undefined) {
+        baseObject.entranceDelayMs = obj.entranceDelayMs;
+      }
 
       return baseObject;
     });

src/pages/viewer/utils/entranceAnimationStyle.ts

@@ -2,7 +2,9 @@ import type { CSSProperties } from "react";
 import type { EditorObject } from "@/pages/editor/store/editorStore";
 import {
   DEFAULT_ENTRANCE_DURATION_MS,
+  DEFAULT_ENTRANCE_DELAY_MS,
   ENTRANCE_ANIMATION_BASE_DELAY_MS,
+  MAX_ENTRANCE_DELAY_MS,
 } from "@/shared/entranceAnimation";
 
 const ANIMATION_NAMES: Record<
@@ -76,6 +78,11 @@ export function mergeEntranceAnimationStyle(
     1000;
   const baseDelaySec = ENTRANCE_ANIMATION_BASE_DELAY_MS / 1000;
   const staggerSec = Math.min(elementIndex * 0.045, 1.2);
+  const userDelayMs = Math.min(
+    MAX_ENTRANCE_DELAY_MS,
+    Math.max(DEFAULT_ENTRANCE_DELAY_MS, obj.entranceDelayMs ?? DEFAULT_ENTRANCE_DELAY_MS),
+  );
+  const userDelaySec = userDelayMs / 1000;
 
   const rot = options?.rotationDeg ?? obj.rotation ?? 0;
   const opacityEnd = (obj.opacity ?? 100) / 100;
@@ -102,7 +109,7 @@ export function mergeEntranceAnimationStyle(
     willChange: "transform, opacity",
     animationName: name,
     animationDuration: `${durationSec}s`,
-    animationDelay: `${baseDelaySec + staggerSec}s`,
+    animationDelay: `${baseDelaySec + staggerSec + userDelaySec}s`,
     animationTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)",
     animationFillMode: "both",
   };