Remove member animation

Author: Rikthepixel

src/components/pages/about/Member.tsx

@@ -3,26 +3,8 @@ import { motion } from "framer-motion";
 import { IMember } from "@/assets/state/team";
 import LinkButton from "@/components/controls/LinkButton";
 
-const memberAnim = {
-  hidden: {
-    translateY: "5%",
-    transition: {
-      duration: 0.15,
-      ease: "easeOut"
-    }
-  },
-  show: {
-    translateY: "0%",
-    transition: {
-      duration: 0.15,
-      ease: "easeOut"
-    }
-  }
-} as const;
-
 const Member = ({ image, name, title, text, links, animate }: IMember & { animate: boolean; }) => (
-  <motion.div
-    variants={animate ? memberAnim : {}}
+  <li
     className="flex flex-col items-center w-full max-w-full gap-2 p-4 rounded-md shadow motion-safe:transition-all sm:p-6 md:w-fit shadow-primary"
     aria-label="Member"
   >
@@ -52,7 +34,7 @@ const Member = ({ image, name, title, text, links, animate }: IMember & { animat
         </LinkButton>
       ))}
     </div>
-  </motion.div>
+  </li>
 );
 
 export default Member;

src/pages/about.tsx

@@ -1,19 +1,9 @@
 import Head from "next/head";
-import { motion } from "framer-motion";
 
 import members from "@/assets/state/team";
 import Member from "@/components/pages/about/Member";
 import { Page } from "@/types/page";
 
-const membersContainerAnim = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.1
-    }
-  }
-} as const;
-
 const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
   return (
     <>
@@ -54,17 +44,14 @@ const AboutPage: Page = ({ initialLoad, reduceMotion }) => {
           >
             Team
           </h2>
-          <motion.div
+          <ul
             className="flex flex-wrap justify-center gap-4"
             aria-label="Members"
-            initial="hidden"
-            animate="show"
-            variants={membersContainerAnim}
           >
             {members.map((member, i) => (
               <Member key={i} animate={!(reduceMotion || initialLoad)}{...member} />
             ))}
-          </motion.div>
+          </ul>
         </section>
       </main>
     </>