enhancement: Smoothed modal animation + reduced motion

package.json

@@ -16,7 +16,7 @@
     "snippets:consolidate": "node ./utils/consolidateSnippets.js"
   },
   "dependencies": {
-    "framer-motion": "^11.15.0",
+    "motion": "^11.15.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/SnippetList.tsx

@@ -1,4 +1,4 @@
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
@@ -13,6 +13,8 @@ const SnippetList = () => {
   const { fetchedSnippets } = useSnippets();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const shouldReduceMotion = useReducedMotion();
+
   if (!fetchedSnippets)
     return (
       <div>
@@ -34,41 +36,54 @@ const SnippetList = () => {
     <>
       <motion.ul role="list" className="snippets">
         <AnimatePresence mode="popLayout">
-          {fetchedSnippets.map((snippet, idx) => (
-            <motion.li
-              key={idx}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{
-                opacity: 1,
-                y: 0,
-                transition: {
-                  delay: idx * 0.05,
-                  duration: 0.2,
-                },
-              }}
-              exit={{
-                opacity: 0,
-                y: -20,
-                transition: {
-                  delay: (fetchedSnippets.length - 1 - idx) * 0.01,
-                  duration: 0.09,
-                },
-              }}
-            >
-              <motion.button
-                className="snippet | flow"
-                data-flow-space="sm"
-                onClick={() => handleOpenModal(snippet)}
-                whileHover={{ scale: 1.01 }}
-                whileTap={{ scale: 0.98 }}
+          {fetchedSnippets.map((currentSnippet, idx) => {
+            return (
+              <motion.li
+                key={currentSnippet.title + idx}
+                layoutId={currentSnippet.title + (idx + 1).toString()} // unique id for layout animation
+                initial={{ opacity: 0, y: 20 }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    delay: shouldReduceMotion ? 0 : 0.09 + idx * 0.05,
+                    duration: shouldReduceMotion ? 0 : 0.2,
+                  },
+                }}
+                exit={{
+                  opacity: 0,
+                  y: -20,
+                  transition: {
+                    delay: idx * 0.01,
+                    duration: shouldReduceMotion ? 0 : 0.09,
+                  },
+                }}
+                transition={{
+                  type: "spring",
+                  duration: shouldReduceMotion ? 0 : 0.5,
+                }}
               >
-                <div className="snippet__preview">
-                  <img src={language.icon} alt={language.lang} />
-                </div>
-                <h3 className="snippet__title">{snippet.title}</h3>
-              </motion.button>
-            </motion.li>
-          ))}
+                <motion.button
+                  className="snippet | flow"
+                  data-flow-space="sm"
+                  onClick={() =>
+                    handleOpenModal({
+                      ...currentSnippet,
+                      // added idx for the layout animation to work correctly
+                      idx: idx + 1,
+                    })
+                  }
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <div className="snippet__preview">
+                    <img src={language.icon} alt={language.lang} />
+                  </div>
+                  <h3 className="snippet__title">{currentSnippet.title}</h3>
+                </motion.button>
+              </motion.li>
+            );
+          })}
         </AnimatePresence>
       </motion.ul>
 

src/components/SnippetModal.tsx

@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "motion/react";
 import React from "react";
 import ReactDOM from "react-dom";
 
@@ -23,6 +23,8 @@ const SnippetModal: React.FC<Props> = ({
 }) => {
   const modalRoot = document.getElementById("modal-root");
 
+  const shouldReduceMotion = useReducedMotion();
+
   useEscapeKey(handleCloseModal);
 
   if (!modalRoot) {
@@ -41,16 +43,14 @@ const SnippetModal: React.FC<Props> = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      transition={{ duration: 0.2 }}
+      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
     >
       <motion.div
         key="modal-content"
         className="modal | flow"
         data-flow-space="lg"
-        initial={{ scale: 0.8, opacity: 0, y: 20 }}
-        animate={{ scale: 1, opacity: 1, y: 0 }}
-        exit={{ scale: 0.8, opacity: 0, y: 20 }}
-        transition={{ type: "spring", duration: 0.5 }}
+        layoutId={snippet.title + snippet.idx?.toString()} // unique id for layout animation
+        transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }}
       >
         <div className="modal__header">
           <h2 className="section-title">{snippet.title}</h2>

src/types/index.ts

@@ -14,6 +14,7 @@ export type SnippetType = {
   code: string;
   tags: string[];
   author: string;
+  idx?: number;
 };
 
 export type AppState = {