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%);