Commit 81abc4dc authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Adjust toast-message animations, especially for prefers-reduced-motion

parent 0e1bd045
...@@ -120,8 +120,13 @@ function ToastMessages({ toastMessenger }) { ...@@ -120,8 +120,13 @@ function ToastMessages({ toastMessenger }) {
<li <li
className={classnames( className={classnames(
'relative w-full container hover:cursor-pointer', 'relative w-full container hover:cursor-pointer',
'animate-slide-in-from-right ',
{ {
// Slide in from right in narrow viewports; fade in in
// larger viewports to toast message isn't flying too far
'motion-safe:animate-slide-in-from-right lg:animate-fade-in':
!message.isDismissed,
// Only ever fade in if motion-reduction is preferred
'motion-reduce:animate-fade-in': !message.isDismissed,
'animate-fade-out': message.isDismissed, 'animate-fade-out': message.isDismissed,
} }
)} )}
......
...@@ -18,6 +18,7 @@ export default { ...@@ -18,6 +18,7 @@ export default {
animation: { animation: {
'adder-pop-down': 'adder-pop-down 0.08s ease-in forwards', 'adder-pop-down': 'adder-pop-down 0.08s ease-in forwards',
'adder-pop-up': 'adder-pop-up 0.08s ease-in forwards', 'adder-pop-up': 'adder-pop-up 0.08s ease-in forwards',
'fade-in': 'fade-in 0.3s forwards',
'fade-in-slow': 'fade-in 1s ease-in', 'fade-in-slow': 'fade-in 1s ease-in',
'fade-out': 'fade-out 0.3s forwards', 'fade-out': 'fade-out 0.3s forwards',
'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out', 'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment