diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index b2afa07a2..f0855863d 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -622,3 +622,9 @@ article {
     }
   }
 }
+
+// When a user has wrapped their gif in a <center> we don't want to manipulate the position
+center .ff-container {
+  left: unset;
+  transform: none;
+}
diff --git a/app/javascript/utilities/animatedImageUtils.jsx b/app/javascript/utilities/animatedImageUtils.jsx
index f7bb8540c..978a8d54d 100644
--- a/app/javascript/utilities/animatedImageUtils.jsx
+++ b/app/javascript/utilities/animatedImageUtils.jsx
@@ -16,13 +16,17 @@ export const initializePausableAnimatedImages = (animatedImages = []) => {
   if (animatedImages.length > 0) {
     const freezeframes = [];
 
-    // Remove the surrounding links for the image, so it can be clicked to play/pause
-    for (const image of animatedImages) {
+    for (let i = 0; i < animatedImages.length; i++) {
+      const image = animatedImages[i];
+      // Give the image an ID so that we can uniquely target it in freezeframe
+      image.setAttribute('id', `animated-${i}`);
+
+      // Remove the surrounding links for the image, so it can be clicked to play/pause
       image.closest('a').outerHTML = image.outerHTML;
 
       freezeframes.push(
         new Freezeframe({
-          selector: `img[src="${image.getAttribute('src')}"]`,
+          selector: `img[id='animated-${i}']`,
           responsive: false,
           trigger: 'click',
         }),