Motion

client/package.json

@@ -18,6 +18,7 @@
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "graphql": "^16.11.0",
+    "motion": "^14.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.4.0",

client/src/components/layout/Layout.tsx

@@ -1,19 +1,21 @@
 import { Outlet } from 'react-router';
 import Header from './Header';
 import { BottomNav } from './BottomNav';
+import { MotionConfig } from 'motion/react';
 
 // felles ramme for alle sider
 export default function Layout() {
   return (
-    <div className="min-h-screen bg-background text-text">
-      <Header />
-
-      {/* ekstra plass nederst på mobil så bunnmenyen ikke dekker innholdet */}
-      <main className="mx-auto w-full max-w-6xl px-4 pt-8 pb-28 desktop:pb-8">
-        <Outlet />
-      </main>
-
-      <BottomNav />
-    </div>
+    // gir mulighet for bruker å skru av animasjoner
+    <MotionConfig reducedMotion="user">
+      <div className="min-h-screen bg-background text-text">
+        <Header />
+        {/* ekstra plass nederst på mobil så bunnmenyen ikke dekker innholdet */}
+        <main className="mx-auto w-full max-w-6xl px-4 pt-8 pb-28 desktop:pb-8">
+          <Outlet />
+        </main>
+        <BottomNav />
+      </div>
+    </MotionConfig>
   );
 }

client/src/lib/motion.ts

@@ -0,0 +1,24 @@
+import type { Transition, Variants } from 'motion/react';
+
+// bare å legge inn andre ideer folk har
+
+// felles fart så alle animasjoner føles like
+export const quick: Transition = { duration: 0.2, ease: 'easeOut' };
+
+// spring for ting som skal gli eller sprette
+export const spring: Transition = {
+  type: 'spring',
+  stiffness: 500,
+  damping: 35,
+};
+
+// fades inn eller ut
+export const fade: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: { opacity: 1, y: 0 },
+};