Add anime.js library for animations

frontend/src/components/Chat/ChatHeader.tsx

@@ -1,17 +1,26 @@
 "use client";
 import { useRoom } from "@/contexts/RoomContext";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import Popup from "../shared/Popup";
 import ClipboardJS from "clipboard";
+import anime from "animejs";
 
 function ChatHeader({ roomId }: { roomId: string }) {
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const { rooms, myRooms } = useRoom();
   const room = rooms.concat(myRooms).find((room) => room.id === roomId);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     const clipboard = new ClipboardJS(".btn", {
       text: function () {
+        if (buttonRef.current) {
+          anime({
+            targets: buttonRef.current,
+            scale: [10, 1],
+            easing: "easeOutElastic",
+          });
+        }
         return roomId;
       },
     });
@@ -29,6 +38,7 @@ function ChatHeader({ roomId }: { roomId: string }) {
     <div className="basis-[7%]  flex justify-between items-center p-3 font-medium dark:bg-neutral-800 bg-slate-200 rounded-lg">
       <p className="text-xl dark:text-white">{room?.title}</p>
       <button
+        ref={buttonRef}
         type="submit"
         className="btn bg-red-600 hover:bg-red-800 text-sm sm:text-base"
       >

frontend/src/components/Room/RoomCard.tsx

@@ -3,19 +3,21 @@ import IRoom from "@/interfaces/IRoom";
 import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import Avatar from "react-avatar";
 import { ImExit } from "react-icons/im";
 import { useSocket } from "@/contexts/SocketContext";
 import { useRouter } from "next/navigation";
 import { useUser } from "@/contexts/UserContext";
+import anime from "animejs";
 
 function RoomCard({ room, users }: { room: IRoom; users: string[] }) {
   const { roomId } = useParams();
   const { myRooms, setMyRooms } = useRoom();
   const { socket } = useSocket();
   const { username } = useUser();
   const router = useRouter();
+  const roomRef = useRef<HTMLAnchorElement>(null);
 
   const handleQuitRoom = () => {
     socket?.emit("quit_room", { username, roomId: room.id });
@@ -29,8 +31,25 @@ function RoomCard({ room, users }: { room: IRoom; users: string[] }) {
     }
   }, [myRooms]);
 
+  useEffect(() => {
+    if (room.id === roomId) {
+      anime({
+        targets: roomRef.current,
+        scale: [1, 0.97],
+        duration: 500,
+      });
+    } else {
+      anime({
+        targets: roomRef.current,
+        scale: 1,
+        duration: 500,
+      });
+    }
+  }, [roomId]);
+
   return (
     <Link
+      ref={roomRef}
       href={`chat/${room.id}`}
       className={`flex group relative gap-3 items-center p-2 flex-col sm:flex-row ${
         room.id === roomId ? "bg-gray- dark:bg-gray-700" : ""

frontend/src/components/shared/Popup.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+import anime from "animejs";
 
 function Popup({
   text,
@@ -9,16 +10,34 @@ function Popup({
   showPopup: boolean;
   setShowPopup: React.Dispatch<boolean>;
 }) {
+  const popupRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
-    if (showPopup) setTimeout(() => setShowPopup(false), 3000);
+    if (showPopup) {
+      anime({
+        targets: popupRef.current,
+        opacity: [0, 1],
+        duration: 1000,
+        translateY: [-50, 0],
+      });
+
+      setTimeout(() => {
+        anime({
+          targets: popupRef.current,
+          translateY: [0, +50],
+          opacity: [1, 0],
+          duration: 1000,
+        });
+        setShowPopup(false);
+      }, 2000);
+    }
   }, [showPopup]);
+
   return (
-    <div
-      className={`absolute bottom-20 left-1/2 z-30 -translate-x-1/2 opacity-0  ${
-        showPopup && "animate-popup"
-      }`}
-    >
-      <p className="dark:text-gray-300">{text}</p>
+    <div className="absolute bottom-20 left-1/2 z-30 -translate-x-1/2">
+      <div ref={popupRef} className="opacity-0">
+        <p className="dark:text-gray-300">{text}</p>
+      </div>
     </div>
   );
 }