animate select cubes and modal-solve

Author: bryanlundberg

src/components/Select.tsx

@@ -12,6 +12,7 @@ import translation from "@/translations/global.json";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useCubesModalStore } from "@/store/CubesModalStore";
 import useClickOutside from "@/hooks/useClickOutside";
+import { AnimatePresence, motion } from "framer-motion";
 
 export default function Select() {
   const [open, setOpen] = useState<boolean>(false);
@@ -51,17 +52,36 @@ export default function Select() {
             <SelectOptions />
           </div>
         </button>
-        {open === true ? (
-          <div
-            id="list-options"
-            className={
-              "absolute z-40 overflow-auto max-h-[400px] p-1 top-12 mt-1 right-0 w-full h-auto border rounded-md light:bg-neutral-200 light:border-neutral-400 light:text-neutral-900 dark:bg-zinc-900 dark:border-zinc-700 dark:text-slate-100"
-            }
-          >
-            {/* Favorites */}
-            <LabelSection description={translation.inputs["favorites"][lang]} />
-            {cubes?.map((cube) => {
-              if (cube.favorite) {
+        <AnimatePresence>
+          {open === true ? (
+            <motion.div
+              initial={{ y: 0, scale: 0.9, opacity: 0.8 }}
+              animate={{ y: 0, scale: 1, opacity: 1 }}
+              exit={{ x: 0, scale: 0.9, opacity: 0 }}
+              id="list-options"
+              className={
+                "absolute z-40 overflow-auto max-h-[400px] p-1 top-12 mt-1 right-0 w-full h-auto border rounded-md light:bg-neutral-200 light:border-neutral-400 light:text-neutral-900 dark:bg-zinc-900 dark:border-zinc-700 dark:text-slate-100"
+              }
+            >
+              {/* Favorites */}
+              <LabelSection
+                description={translation.inputs["favorites"][lang]}
+              />
+              {cubes?.map((cube) => {
+                if (cube.favorite) {
+                  return (
+                    <Option
+                      key={genId()}
+                      name={cube.name}
+                      category={cube.category}
+                      cubeId={cube.id}
+                      handleClose={handleClose}
+                    />
+                  );
+                }
+              })}
+              <LabelSection description={translation.inputs["list"][lang]} />
+              {cubes?.map((cube) => {
                 return (
                   <Option
                     key={genId()}
@@ -71,23 +91,11 @@ export default function Select() {
                     handleClose={handleClose}
                   />
                 );
-              }
-            })}
-            <LabelSection description={translation.inputs["list"][lang]} />
-            {cubes?.map((cube) => {
-              return (
-                <Option
-                  key={genId()}
-                  name={cube.name}
-                  category={cube.category}
-                  cubeId={cube.id}
-                  handleClose={handleClose}
-                />
-              );
-            })}
-            <AddCubeOption />
-          </div>
-        ) : null}
+              })}
+              <AddCubeOption />
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
       </div>
     </>
   );

src/components/solves/ModalSolve.tsx

@@ -21,6 +21,7 @@ import { useEffect, useState } from "react";
 import ChevronUp from "@/icons/ChevronUp";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import translation from "@/translations/global.json";
+import { motion } from "framer-motion";
 
 export default function ModalSolve() {
   const [showOptions, setShowOptions] = useState<boolean>(false);
@@ -108,12 +109,17 @@ export default function ModalSolve() {
   return (
     <>
       <div
-        className="fixed top-0 left-0 z-50 flex flex-col items-center justify-center w-full h-screen px-8 py-4 overflow-x-hidden overflow-y-auto bg-black bg-opacity-75 md:inset-0 text-neutral-950"
+        className="fixed top-0 left-0 z-50 flex flex-col items-center justify-center w-full h-screen px-8 py-4 overflow-x-hidden overflow-y-auto bg-black bg-opacity-10 md:inset-0 text-neutral-950"
         onClick={(e) => {
           if (e.target === e.currentTarget) setStatus(false);
         }}
       >
-        <div className="relative w-full h-auto text-xs bg-white rounded-md sm:w-96">
+        <motion.div
+          initial={{ y: 0, scale: 0.9, opacity: 0.8 }}
+          animate={{ y: 0, scale: 1, opacity: 1 }}
+          exit={{ x: 0, scale: 0.9, opacity: 0 }}
+          className="relative w-full h-auto text-xs bg-white rounded-md sm:w-96"
+        >
           <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-200">
             <div className="flex items-center ">
               <div className="tracking-wider">
@@ -234,7 +240,7 @@ export default function ModalSolve() {
               </div>
             </div>
           )}
-        </div>
+        </motion.div>
       </div>
     </>
   );