Animation added

gylychmedov · Sep 4, 2021 · caa8a7a · caa8a7a · vercel · Feb 18, 2022
1 parent 4ee1e11
commit caa8a7a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/components/Animate/Animations.js b/src/components/Animate/Animations.js
@@ -0,0 +1,8 @@
+export const slideBottom = {
+  show: {
+    y: 0,
+  },
+  hide: {
+    y: -20,
+  },
+};
diff --git a/src/components/Contact/ContactList.js b/src/components/Contact/ContactList.js
@@ -5,6 +5,8 @@ import {
   deleteContactAction,
   setFormUpdateContactAction,
 } from "../../store/actions/contactActions";
+import { motion } from "framer-motion";
+import { slideBottom } from "../Animate/Animations";
 
 const ContactList = () => {
   const dispatch = useDispatch();
@@ -15,7 +17,10 @@ const ContactList = () => {
       {contacts.contacts.length > 0 &&
         contacts.contacts.map((contact, key) => {
           return (
-            <aside
+            <motion.aside
+              variants={slideBottom}
+              initial="hide"
+              animate="show"
               key={key}
               className={`bg-opacity-50 rounded-xl w-full lg:w-8/12 px-5 py-3 flex items-center justify-between ${
                 contacts.form.id == contact.id ? "bg-green-200" : "bg-white"
@@ -47,7 +52,7 @@ const ContactList = () => {
                   <CgTrashEmpty />
                 </div>
               </div>
-            </aside>
+            </motion.aside>
           );
         })}
     </main>