From c05709c43e6c9e8568cb2b5c94e213cc511138a2 Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Fri, 16 Oct 2026 15:10:24 +0200
Subject: [PATCH 1/2] =?UTF-8?q?motion=20setup=20og=20start=20p=C3=A5=20fel?=
 =?UTF-8?q?lesfil=20for=20animasjoner.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/package.json                     |  1 +
 client/src/components/layout/Layout.tsx | 22 ++++++++++++----------
 client/src/lib/motion.ts                | 24 ++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 client/src/lib/motion.ts

diff --git a/client/package.json b/client/package.json
index 3eb3c18..62807cd 100644
--- a/client/package.json
+++ b/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",
diff --git a/client/src/components/layout/Layout.tsx b/client/src/components/layout/Layout.tsx
index ada95ae..8cdf1fb 100644
--- a/client/src/components/layout/Layout.tsx
+++ b/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>
   );
 }
diff --git a/client/src/lib/motion.ts b/client/src/lib/motion.ts
new file mode 100644
index 0000000..5ec82fb
--- /dev/null
+++ b/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 },
+};
\ No newline at end of file

From d66d93ab2534ec6e0902ab48ca6e9136737f2a1f Mon Sep 17 00:00:00 2001
From: Mari Zhevagin <maribz@stud.ntnu.no>
Date: Fri, 16 Oct 2026 15:21:56 +0200
Subject: [PATCH 2/2] glemte denne

---
 client/src/lib/motion.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/lib/motion.ts b/client/src/lib/motion.ts
index 5ec82fb..6032a35 100644
--- a/client/src/lib/motion.ts
+++ b/client/src/lib/motion.ts
@@ -21,4 +21,4 @@ export const fade: Variants = {
 export const fadeUp: Variants = {
   hidden: { opacity: 0, y: 8 },
   visible: { opacity: 1, y: 0 },
-};
\ No newline at end of file
+};