diff --git a/src/services/litegraphService.ts b/src/services/litegraphService.ts
index 4a53ed448..c3d9994bb 100644
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -847,10 +847,13 @@ export const useLitegraphService = () => {
 
         const isAnimatedWebp =
           this.animatedImages &&
-          // @ts-expect-error fixme ts strict error
-          output.images.some((img) => img.filename?.includes('webp'))
+          output?.images?.some((img) => img.filename?.includes('webp'))
+        const isAnimatedPng =
+          this.animatedImages &&
+          output?.images?.some((img) => img.filename?.includes('png'))
         const isVideo =
-          (this.animatedImages && !isAnimatedWebp) || isVideoNode(this)
+          (this.animatedImages && !isAnimatedWebp && !isAnimatedPng) ||
+          isVideoNode(this)
         if (isVideo) {
           useNodeVideo(this).showPreview()
         } else {
diff --git a/src/stores/imagePreviewStore.ts b/src/stores/imagePreviewStore.ts
index b2c19b8f9..837895e40 100644
--- a/src/stores/imagePreviewStore.ts
+++ b/src/stores/imagePreviewStore.ts
@@ -21,7 +21,10 @@ const createOutputs = (
 ): ExecutedWsMessage['output'] => {
   return {
     images: filenames.map((image) => ({ type, ...parseFilePath(image) })),
-    animated: filenames.map((image) => isAnimated && image.endsWith('.webp'))
+    animated: filenames.map(
+      (image) =>
+        isAnimated && (image.endsWith('.webp') || image.endsWith('.png'))
+    )
   }
 }