Feature : added some smooth framer animation

package.json

@@ -12,6 +12,7 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "framer-motion": "^11.15.0",
  "prismjs": "^1.29.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",

src/components/SnippetList.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { SnippetType } from "../types";
 import { useAppContext } from "../contexts/AppContext";
 import { useSnippets } from "../hooks/useSnippets";
@@ -30,31 +31,53 @@ const SnippetList = () => {
 
  return (
  <>
- <ul role="list" className="snippets">
+ <motion.ul
+ role="list"
+ className="snippets"
+ initial="hidden"
+ animate="visible"
+ variants={{
+ visible: {
+ transition: {
+ staggerChildren: 0.1
+ }
+ }
+ }}
+ >
  {fetchedSnippets.map((snippet, idx) => (
- <li key={idx}>
- <button
+ <motion.li
+ key={idx}
+ variants={{
+ hidden: { opacity: 0, y: 20 },
+ visible: { opacity: 1, y: 0 }
+ }}
+ >
+ <motion.button
  className="snippet | flow"
  data-flow-space="sm"
  onClick={() => handleOpenModal(snippet)}
+ whileHover={{ scale: 1.01 }}
+ whileTap={{ scale: 0.98 }}
  >
  <div className="snippet__preview">
  <img src={language.icon} alt={language.lang} />
  </div>
 
  <h3 className="snippet__title">{snippet.title}</h3>
- </button>
- </li>
+ </motion.button>
+ </motion.li>
  ))}
- </ul>
-
- {isModalOpen && snippet && (
- <SnippetModal
- snippet={snippet}
- handleCloseModal={handleCloseModal}
- language={language.lang}
- />
- )}
+ </motion.ul>
+
+ <AnimatePresence mode="wait">
+ {isModalOpen && snippet && (
+ <SnippetModal
+ snippet={snippet}
+ handleCloseModal={handleCloseModal}
+ language={language.lang}
+ />
+ )}
+ </AnimatePresence>
  </>
  );
 };

src/components/SnippetModal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { motion } from "framer-motion";
 import Button from "./Button";
 import { CloseIcon } from "./Icons";
 import CodePreview from "./CodePreview";
@@ -23,15 +24,28 @@ const SnippetModal: React.FC<Props> = ({
  useEscapeKey(handleCloseModal);
 
  return ReactDOM.createPortal(
- <div
+ <motion.div
+ key="modal-overlay"
  className="modal-overlay"
  onClick={(e) => {
  if (e.target === e.currentTarget) {
  handleCloseModal();
  }
  }}
+ initial={{ opacity: 0 }}
+ animate={{ opacity: 1 }}
+ exit={{ opacity: 0 }}
+ transition={{ duration: 0.2 }}
  >
- <div className="modal | flow" data-flow-space="lg">
+ <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 }}
+ >
  <div className="modal__header">
  <h2 className="section-title">{snippet.title}</h2>
  <Button isIcon={true} onClick={handleCloseModal}>
@@ -61,8 +75,8 @@ const SnippetModal: React.FC<Props> = ({
  </li>
  ))}
  </ul>
- </div>
- </div>,
+ </motion.div>
+ </motion.div>,
  modalRoot
  );
 };

tsconfig.app.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/categorylist.tsx","./src/components/codepreview.tsx","./src/components/copytoclipboard.tsx","./src/components/icons.tsx","./src/components/languageselector.tsx","./src/components/linkbutton.tsx","./src/components/logo.tsx","./src/components/searchinput.tsx","./src/components/snippetlist.tsx","./src/components/snippetmodal.tsx","./src/components/themetoggle.tsx","./src/contexts/appcontext.tsx","./src/hooks/usecategories.ts","./src/hooks/useescapekey.ts","./src/hooks/usefetch.ts","./src/hooks/usekeyboardnavigation.ts","./src/hooks/uselanguages.ts","./src/hooks/usesnippets.ts","./src/layouts/banner.tsx","./src/layouts/footer.tsx","./src/layouts/header.tsx","./src/layouts/sidebar.tsx","./src/types/index.ts","./src/utils/slugify.ts"],"version":"5.6.3"}

tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}