From 27266fcd212af6256511a912fb85c303e1b3a4d9 Mon Sep 17 00:00:00 2001
From: Vinicius Depizzol <vdepizzol@gmail.com>
Date: Fri, 30 Sep 2022 11:24:26 -0700
Subject: [PATCH] Fix Overlay easing animation (#2269)

* Fix overlay easing animation

* Create empty-hornets-kick.md

Co-authored-by: Katie Langerman <langermank@github.com>
---
 .changeset/empty-hornets-kick.md |  5 +++++
 src/overlay/overlay.scss         | 16 +++++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/empty-hornets-kick.md

diff --git a/.changeset/empty-hornets-kick.md b/.changeset/empty-hornets-kick.md
new file mode 100644
index 0000000000..563a78a48a
--- /dev/null
+++ b/.changeset/empty-hornets-kick.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix Overlay easing animation
diff --git a/src/overlay/overlay.scss b/src/overlay/overlay.scss
index 827d5113b2..7ea9b2cf18 100644
--- a/src/overlay/overlay.scss
+++ b/src/overlay/overlay.scss
@@ -352,7 +352,7 @@ $primer-borderRadius-large: 0.75rem;
       border-bottom-left-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInRight;
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInRight;
       }
     }
   }
@@ -369,7 +369,7 @@ $primer-borderRadius-large: 0.75rem;
       border-bottom-right-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideInLeft;
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideInLeft;
       }
     }
   }
@@ -387,7 +387,7 @@ $primer-borderRadius-large: 0.75rem;
       border-bottom-left-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: 160ms cubic-bezier(0.32, 0, 0.67, 0) 0s 1 normal none running Overlay--motion-slideUp;
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideUp;
       }
     }
   }
@@ -400,6 +400,10 @@ $primer-borderRadius-large: 0.75rem;
       border-radius: $primer-borderRadius-large;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
+
+      @media screen and (prefers-reduced-motion: no-preference) {
+        animation: 250ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-slideDown;
+      }
     }
   }
 }
@@ -455,6 +459,12 @@ $primer-borderRadius-large: 0.75rem;
   }
 }
 
+@keyframes Overlay--motion-slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+}
+
 @keyframes Overlay--motion-slideUp {
   from {
     transform: translateY(100%);