search animation

src/animations/search.animation.ts

@@ -0,0 +1,15 @@
+// Types
+import { Variants } from "framer-motion";
+
+export const searchMotion: Variants = {
+  rest: {
+    transform: "translateY(0rem)",
+    opacity: 1,
+    type: "spring",
+  },
+  active: {
+    transform: "translateX(6rem)",
+    opacity: 0,
+    type: "tween",
+  },
+};

src/components/header/Search.tsx

@@ -1,7 +1,15 @@
+// Modules
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+// Animations
+import { searchMotion } from "../../animations/search.animation";
+
 // Icons
 import { ReactComponent as Loop } from "../../assets/icons/loop.svg";
 
 const Search = () => {
+  const [input, setInput] = useState<string>("");
   return (
     <form
       className="search"
@@ -9,11 +17,22 @@ const Search = () => {
         event.preventDefault()
       }
     >
-      <input type="text" />
-      <div>
-        <Loop />
+      <input
+        type="text"
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+          setInput(event.target.value)
+        }
+      />
+      <motion.div
+        initial={"rest"}
+        animate={input.length > 0 ? "active" : "rest"}
+        variants={searchMotion}
+      >
+        <motion.svg>
+          <Loop />
+        </motion.svg>
         <span>Search anything...</span>
-      </div>
+      </motion.div>
     </form>
   );
 };

src/styles/_nav.scss

@@ -9,6 +9,7 @@
 }
 
 .search {
+  overflow: hidden;
   position: relative;
   input {
     border: 0.1rem solid $gray-dark;