diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 31c3564b..b47a054d 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `--track-active-offset` CSS custom property to `<sl-range>` [#806](https://github.com/shoelace-style/shoelace/issues/806)
 - Fixed a bug that caused `<sl-select>` to sometimes have two vertical scrollbars [#814](https://github.com/shoelace-style/shoelace/issues/814)
 - Fixed a bug that caused a gray line to appear between radio buttons [#821](https://github.com/shoelace-style/shoelace/discussions/821)
+- Fixed a bug that caused `<sl-animated-image>` to not render anything when using the `play` attribute initially [#824](https://github.com/shoelace-style/shoelace/issues/824)
 - Removed `:focus-visible` shim now that the last two major versions of Safari support it
 
 ## 2.0.0-beta.77
diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts
index 22cedbf0..123ac716 100644
--- a/src/components/animated-image/animated-image.ts
+++ b/src/components/animated-image/animated-image.ts
@@ -61,7 +61,7 @@ export default class SlAnimatedImage extends LitElement {
     emit(this, 'sl-error');
   }
 
-  @watch('play')
+  @watch('play', { waitUntilFirstUpdate: true })
   handlePlayChange() {
     // When the animation starts playing, reset the src so it plays from the beginning. Since the src is cached, this
     // won't trigger another request.