✨ feat(profile): add tags transitions animation

myanmar-software-engineers · Oct 21, 2023 · 644ec26 · 644ec26
1 parent 9f375a6
commit 644ec26
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/components/Profile/ProfileCardItem/ProfileCardItem.tsx b/src/components/Profile/ProfileCardItem/ProfileCardItem.tsx
@@ -26,7 +26,7 @@ const ProfileCardItem = ({
   const bgColor = generateColor();
 
   return (
-    <div key={_id} className="self-stretch">
+    <div key={_id} className="self-stretch animate-fadein">
       <Link href={`/profile/${slugAsParams}`}>
         <SquareBox
           className={cn(

diff --git a/src/components/Profile/ProfileCardList/ProfileCardList.tsx b/src/components/Profile/ProfileCardList/ProfileCardList.tsx
@@ -11,6 +11,8 @@ import { Profile } from "contentlayer/generated";
 import { useSearchParams } from "next/navigation";
 import { useMemo, useState } from "react";
 import { IoPeople } from "react-icons/io5";
+import { motion } from "framer-motion";
+import { opacityAnimation } from "@/data/animationVariants";
 
 type TPropsProfileCardList = {
   profiles: Profile[];
@@ -40,16 +42,22 @@ const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
 
   return (
     <>
-      <div>
+      <motion.div
+        initial="hidden"
+        animate="visible"
+        transition={{ staggerChildren: 0.005 }}
+        className="relative"
+      >
         {uniqueTags.map((tag, i) => (
-          <Tag
+          <motion.span
             key={tag}
-            tag={tag}
-            searchTag={searchTag}
-            bgColor={uniqueTagColors[i]}
-          />
+            variants={opacityAnimation}
+            className="inline-block"
+          >
+            <Tag tag={tag} searchTag={searchTag} bgColor={uniqueTagColors[i]} />
+          </motion.span>
         ))}
-      </div>
+      </motion.div>
 
       <div className="flex flex-col gap-3 md:flex-row mt-2 md:items-center">
         <input
@@ -78,7 +86,7 @@ const ProfileCardList = ({ profiles }: TPropsProfileCardList) => {
 
       <SpacingDivider size="lg" />
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 relative">
         {filteredProfiles.map((profile) => (
           <ProfileCardItem
             key={profile._id}

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,6 +12,10 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      // that is animation class
+      animation: {
+        fadein: "fadeIn 0.5s ease-out forwards",
+      },
       colors: {
         primary: "#923293",
         secondary: "",
@@ -30,6 +34,14 @@ const config: Config = {
           "0%, 100%": { transform: "rotate(-3deg)" },
           "50%": { transform: "rotate(3deg)" },
         },
+        fadeIn: {
+          "0%": {
+            opacity: "0",
+          },
+          "100%": {
+            opacity: "1",
+          },
+        },
       },
     },
   },