Feat: Motion safe animations (#6739)

canerakdas · web-flow · commit 1c4334ffeee5 · 2024-05-28T14:42:43.000Z
* fix: motion safe animations

* feat: smooth scroll behavior in article
diff --git a/layouts/layouts.module.css b/layouts/layouts.module.css
@@ -29,6 +29,7 @@
       bg-gradient-subtle
       p-12
       grid-in-[main]
+      motion-safe:scroll-smooth
       dark:bg-gradient-subtle-dark
       xl:px-18
       xs:bg-none
diff --git a/styles/base.css b/styles/base.css
@@ -1,6 +1,6 @@
 * {
   @apply subpixel-antialiased
-    transition-colors;
+    motion-safe:transition-colors;
 }
 
 html,
@@ -10,10 +10,10 @@ body {
 }
 
 body {
-  @apply scroll-smooth
-    bg-white
+  @apply bg-white
     font-open-sans
     text-neutral-950
+    motion-safe:scroll-smooth
     dark:bg-neutral-950
     dark:text-white;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`* {`
`2`	`2`	`@apply subpixel-antialiased`
`3`		`- transition-colors;`
	`3`	`+ motion-safe:transition-colors;`
`4`	`4`	`}`
`5`	`5`
`6`	`6`	`html,`
`@@ -10,10 +10,10 @@ body {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`body {`
`13`		`- @apply scroll-smooth`
`14`		`- bg-white`
	`13`	`+ @apply bg-white`
`15`	`14`	`font-open-sans`
`16`	`15`	`text-neutral-950`
	`16`	`+ motion-safe:scroll-smooth`
`17`	`17`	`dark:bg-neutral-950`
`18`	`18`	`dark:text-white;`
`19`	`19`	`}`