From af8eb7ba493c916abc057680e3666643d16c6aa2 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Wed, 1 Feb 2023 02:57:54 +0500
Subject: [PATCH] search animation

---
 src/animations/search.animation.ts | 15 +++++++++++++++
 src/components/header/Search.tsx   | 27 +++++++++++++++++++++++----
 src/styles/_nav.scss               |  1 +
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/animations/search.animation.ts

diff --git a/src/animations/search.animation.ts b/src/animations/search.animation.ts
new file mode 100644
index 0000000..3011609
--- /dev/null
+++ b/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",
+  },
+};
diff --git a/src/components/header/Search.tsx b/src/components/header/Search.tsx
index da4b780..1389bdc 100644
--- a/src/components/header/Search.tsx
+++ b/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>
   );
 };
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index 0496c41..a5c8b92 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -9,6 +9,7 @@
 }
 
 .search {
+  overflow: hidden;
   position: relative;
   input {
     border: 0.1rem solid $gray-dark;