Fix Overlay easing animation (#2269)

* Fix overlay easing animation * Create empty-hornets-kick.md Co-authored-by: Katie Langerman <langermank@github.com>
primer · Sep 30, 2022 · 27266fc · 27266fc
1 parent 2e2bc71
commit 27266fc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/empty-hornets-kick.md 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
@@ -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%);