feat: add motion safe animation

theodorusclarence · Feb 26, 2022 · 0c32b09 · 0c32b09 · vercel · Feb 26, 2022
1 parent d439f95
commit 0c32b09
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -29,7 +29,8 @@ export default function Button({
         'px-4 py-2 font-bold rounded',
         'border border-gray-300 shadow-sm dark:border-gray-600',
         'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-        'transform-gpu scale-100 hover:scale-[1.03] active:scale-[0.97]',
+        'scale-100 motion-safe:transform-gpu hover:scale-[1.03] active:scale-[0.97]',
+        'motion-reduce:hover:scale-100',
         'transition duration-100',
         'animate-shadow',
         {

diff --git a/src/components/content/blog/BlogCard.tsx b/src/components/content/blog/BlogCard.tsx
@@ -25,8 +25,9 @@ export default function BlogCard({
     <li
       className={clsx(
         'w-full bg-white rounded-md border border-gray-300 dark:bg-dark dark:border-gray-600',
-        'transform-gpu scale-100 hover:scale-[1.02] active:scale-[0.97]',
+        'scale-100 motion-safe:transform-gpu hover:scale-[1.02] active:scale-[0.97]',
         'transition duration-100',
+        'motion-reduce:hover:scale-100',
         'animate-shadow',
         className
       )}

diff --git a/src/components/content/library/LibraryCard.tsx b/src/components/content/library/LibraryCard.tsx
@@ -17,8 +17,9 @@ export default function LibraryCard({ className, snippet }: LibraryCardProps) {
     <li
       className={clsx(
         'ring-vis-0 h-full bg-white rounded-md border dark:bg-dark dark:border-gray-600',
-        'transform-gpu scale-100 hover:scale-[1.04] active:scale-[0.97]',
+        'scale-100 motion-safe:transform-gpu hover:scale-[1.04] active:scale-[0.97]',
         'transition duration-100',
+        'motion-reduce:hover:scale-100',
         'animate-shadow',
         className
       )}

diff --git a/src/components/content/projects/ProjectCard.tsx b/src/components/content/projects/ProjectCard.tsx
@@ -17,8 +17,9 @@ export default function ProjectCard({ project, className }: ProjectCardProps) {
       className={clsx(
         'project-card rounded-md md:w-full',
         'border dark:border-gray-600',
-        'transform-gpu scale-100 hover:scale-[1.02] active:scale-[0.97]',
+        'scale-100 motion-safe:transform-gpu hover:scale-[1.02] active:scale-[0.97]',
         'transition duration-100',
+        'motion-reduce:hover:scale-100',
         'animate-shadow',
         className
       )}

diff --git a/src/components/links/ButtonLink.tsx b/src/components/links/ButtonLink.tsx
@@ -23,7 +23,8 @@ export default function ButtonLink({
         'inline-flex px-4 py-2 font-bold rounded',
         'border border-gray-300 shadow-sm dark:border-gray-600',
         'focus:outline-none focus-visible:ring focus-visible:ring-primary-300',
-        'transform-gpu scale-100 hover:scale-[1.03] active:scale-[0.97]',
+        'scale-100 motion-safe:transform-gpu hover:scale-[1.03] active:scale-[0.97]',
+        'motion-reduce:hover:brightness-90 motion-reduce:hover:scale-100',
         'transition duration-100',
         'animate-shadow',
         {

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -34,6 +34,12 @@
     scroll-padding-top: 80px;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+
   ::selection {
     background: rgba(var(--tw-clr-primary-300), 0.3);
   }
@@ -100,6 +106,11 @@
     transition: 0.3s ease;
     transition-property: background-size, color, background-color, border-color;
   }
+  @media (prefers-reduced-motion: reduce) {
+    .animated-underline {
+      transition: none;
+    }
+  }
   .animated-underline:hover,
   .animated-underline:focus-visible,
   .project-card:hover .animated-underline,