search animations

src/animations/search.animation.ts

@@ -16,7 +16,7 @@ export const searchMotion: Variants = {
 
 export const searchMobileMotion: Variants = {
   rest: {
-    width: "12rem",
+    width: "7rem",
     right: "8rem",
     type: "spring",
     borderColor: "rgba(166, 166, 166, 0)",
@@ -52,13 +52,29 @@ export const searchMobileMotion: Variants = {
   },
 
   loopRest: {
-    width: "1.3rem",
-    height: "1.4rem",
-    type: "spring",
-  },
-  loopActive: {
     width: "2rem",
     height: "2rem",
     type: "spring",
   },
+  loopActive: {
+    width: "1.3rem",
+    height: "1.4rem",
+    type: "spring",
+  },
+
+  placeholderRest: {
+    opacity: 0,
+  },
+
+  placeholderActive: {
+    opacity: 1,
+  },
+
+  borderRest: {
+    borderColor: "rgba(166, 166, 166, 0)",
+  },
+
+  borderActive: {
+    borderColor: "rgba(166, 166, 166, 1)",
+  },
 };

src/components/header/Search.tsx

@@ -36,11 +36,14 @@ const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => {
   );
 
   return (
-    <form
+    <motion.form
       className="search"
       onSubmit={(event: React.FormEvent<HTMLFormElement>) =>
         event.preventDefault()
       }
+      variants={searchMobileMotion}
+      initial={isSmall ? "borderRest" : {}}
+      animate={isSmall ? (isInputFocused ? "borderActive" : "borderRest") : {}}
     >
       <input
         type="text"
@@ -61,10 +64,50 @@ const Search = ({ isSmall, isInputFocused, setIsInputFocused }: IProps) => {
         animate={inputValue.length > 0 ? "active" : "rest"}
         variants={searchMotion}
       >
-        <Loop />
-        <span>Search</span>
+        <motion.svg
+          width="13"
+          height="14"
+          viewBox="0 0 13 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          variants={searchMobileMotion}
+          animate={isSmall ? (isInputFocused ? "loopActive" : "loopRest") : {}}
+        >
+          <g clip-path="url(#clip0_138_523)">
+            <path
+              d="M11.9163 12.8394L10.833 11.7561M6.22884 12.2978C6.9046 12.2978 7.57375 12.1647 8.19807 11.9061C8.82239 11.6475 9.38966 11.2684 9.8675 10.7906C10.3453 10.3128 10.7244 9.74548 10.983 9.12116C11.2416 8.49684 11.3747 7.8277 11.3747 7.15194C11.3747 6.47618 11.2416 5.80703 10.983 5.18271C10.7244 4.55839 10.3453 3.99112 9.8675 3.51328C9.38966 3.03545 8.82239 2.65641 8.19807 2.39781C7.57375 2.1392 6.9046 2.0061 6.22884 2.0061C4.86408 2.0061 3.55522 2.54825 2.59019 3.51328C1.62516 4.47831 1.08301 5.78718 1.08301 7.15194C1.08301 8.5167 1.62516 9.82556 2.59019 10.7906C3.55522 11.7556 4.86408 12.2978 6.22884 12.2978V12.2978Z"
+              stroke="#A6A6A6"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_138_523">
+              <rect
+                width="13"
+                height="13"
+                fill="white"
+                transform="translate(0 0.922791)"
+              />
+            </clipPath>
+          </defs>
+        </motion.svg>
+        <motion.span
+          variants={searchMobileMotion}
+          initial={isSmall ? "placeholderRest" : {}}
+          animate={
+            isSmall
+              ? isInputFocused
+                ? "placeholderActive"
+                : "placeholderRest"
+              : {}
+          }
+        >
+          Search
+        </motion.span>
       </motion.div>
-    </form>
+    </motion.form>
   );
 };