style: add animation to presets

src/components/modals/presets/list/list.tsx

@@ -1,4 +1,5 @@
 import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
+import { motion, AnimatePresence } from 'framer-motion';
 
 import styles from './list.module.css';
 
@@ -26,8 +27,15 @@ export function List({ close }: ListProps) {
         <p className={styles.empty}>You don&apos;t have any presets yet.</p>
       )}
 
+      <AnimatePresence>
         {presets.map(preset => (
-        <div className={styles.preset} key={preset.id}>
+          <motion.div
+            animate={{ opacity: 1 }}
+            className={styles.preset}
+            exit={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
+            key={preset.id}
+          >
             <input
               placeholder="Untitled"
               type="text"
@@ -47,8 +55,9 @@ export function List({ close }: ListProps) {
             >
               <FaPlay />
             </button>
-        </div>
+          </motion.div>
         ))}
+      </AnimatePresence>
     </div>
   );
 }