UX: Modal close animation (#32842)

chapoi · web-flow · commit 84762e63178a · 2025-05-26T10:47:15.000+02:00
Adding an animation on closing the modal.
diff --git a/app/assets/javascripts/discourse/app/components/d-modal.gjs b/app/assets/javascripts/discourse/app/components/d-modal.gjs
@@ -193,6 +193,15 @@ export default class DModal extends Component {
       this.animating = false;
     }
 
+    if (this.site.desktopView) {
+      try {
+        this.animating = true;
+        await this.#animatePopOff();
+      } finally {
+        this.animating = false;
+      }
+    }
+
     this.args.closeModal({ initiatedBy });
   }
 
@@ -264,6 +273,33 @@ export default class DModal extends Component {
     ).finished;
   }
 
+  async #animatePopOff() {
+    const backdrop = this.wrapperElement.nextElementSibling;
+
+    if (!backdrop) {
+      return;
+    }
+
+    await Promise.all([
+      this.modalContainer.animate(
+        [
+          { transform: "scale(1)", opacity: 1, offset: 0 },
+          { transform: "scale(0)", opacity: 0, offset: 1 },
+        ],
+        {
+          fill: "forwards",
+          duration: getMaxAnimationTimeMs(300),
+          easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+        }
+      ).finished,
+      backdrop.animate([{ opacity: 0.6 }, { opacity: 0 }], {
+        fill: "forwards",
+        duration: getMaxAnimationTimeMs(300),
+        easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      }).finished,
+    ]);
+  }
+
   <template>
     {{! template-lint-disable no-invalid-interactive }}
 
