From 57661dff6d444ac50bcb685425a704544bb653d9 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 13 Aug 2018 09:00:53 +0200
Subject: [PATCH] Tweak modal transform (#27005)

---
 scss/_modal.scss                  | 4 ++--
 scss/_variables.scss              | 2 ++
 site/docs/4.1/components/modal.md | 6 ++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5eadbf5b84..df8da68ffa 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -43,10 +43,10 @@
   // When fading in the modal, animate it to slide down
   .modal.fade & {
     @include transition($modal-transition);
-    transform: translate(0, -25%);
+    transform: $modal-fade-transform;
   }
   .modal.show & {
-    transform: translate(0, 0);
+    transform: $modal-show-transform;
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8ac3bc583a..be13b56476 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -831,6 +831,8 @@ $modal-lg:                          800px !default;
 $modal-md:                          500px !default;
 $modal-sm:                          300px !default;
 
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
 $modal-transition:                  transform .3s ease-out !default;
 
 
diff --git a/site/docs/4.1/components/modal.md b/site/docs/4.1/components/modal.md
index ac9bf18e7c..2da7d8f3c3 100644
--- a/site/docs/4.1/components/modal.md
+++ b/site/docs/4.1/components/modal.md
@@ -448,6 +448,12 @@ $('#exampleModal').on('show.bs.modal', function (event) {
 })
 {% endhighlight %}
 
+### Change animation
+
+The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
+
+If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`.
+
 ### Remove animation
 
 For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.