-
Notifications
You must be signed in to change notification settings - Fork 27
Feat: respect reduced-motion settings #365
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
marcoambrosini
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice idea! I think it's better to just remove the animation in this case and treat the assistant icon like all other icons.
| /* Tone down the animation to avoid vestibular motion triggers. */ | ||
| @media (prefers-reduced-motion: reduce) { | ||
| .assistant-icon:hover .star1 { | ||
| animation: dissolve 1s linear; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| animation: dissolve 1s linear; | |
| animation: none; | |
| opacity: 1; |
| } | ||
| .assistant-icon:hover .star2 { | ||
| animation: dissolve 1s linear; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| animation: dissolve 1s linear; | |
| animation: none; | |
| opacity: 1; |
| } | ||
| .assistant-icon:hover .star3 { | ||
| animation: dissolve 1s linear; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| animation: dissolve 1s linear; | |
| animation: none; | |
| opacity: 1; |
| @keyframes dissolve { | ||
| 0% { opacity: 1; } | ||
| 50% { opacity: 0.5; } | ||
| 100% { opacity: 1; } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| @keyframes dissolve { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } |
Signed-off-by: Jana Peper <[email protected]>
Signed-off-by: Jana Peper <[email protected]>
86a6575 to
dbb8080
Compare
Done! Also deactivated the placeholder animation in the Chat UI |
marcoambrosini
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
deactivates the icon animation and the placeholder movement when reduce-motion OS setting is set
CSS feature and how to activate it described here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion