Merge pull request #28 from EveripediaNetwork/animation-iteration

Animation iteration
EveripediaNetwork · Dec 7, 2023 · b4a6ff8 · b4a6ff8 · vercel · Dec 7, 2023
2 parents b34b126 + 02e6dda
commit b4a6ff8
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 25 deletions.
diff --git a/src/components/layouts/Hero.tsx b/src/components/layouts/Hero.tsx
@@ -1,8 +1,8 @@
 import { space_grotesk } from "@/app/font";
 import React from "react";
 import { RiArrowDownDoubleLine } from "react-icons/ri";
-import Navbar from "./Navbar";
 import InViewAnimateBottom from "../transitions/InViewAnimateBottom";
+import Navbar from "./Navbar";
 
 const Hero = () => {
   return (
@@ -20,15 +20,15 @@ const Hero = () => {
           <div className="max-w-[1536px] mx-auto">
             <Navbar />
             <div className="flex flex-col items-center w-full justify-center relative overflow-y-hidden h-[calc(40vh-65px)] md:h-[calc(60vh-65px)] lg:h-[calc(60vh-65px)]">
-              <div className="flex text-center md:text-left items-center md:items-start flex-col justify-start mx-auto gap-1 sm:gap-5 w-full px-4 sm:px-0 max-w-6xl">
+              <div className="flex text-center md:text-left items-center flex-col justify-start mx-auto gap-1 sm:gap-5 w-full px-4 sm:px-0 max-w-6xl">
                 <InViewAnimateBottom>
                   <h1
                     className={`text-2xl sm:text-4xl md:text-5xl animate-fade-in xl:text-[60px] 2xl:text-[70px] !leading-tight text-center font-bold ${space_grotesk.className}`}
                   >
                     Building a more intelligent future through the IQ token.
                   </h1>
                 </InViewAnimateBottom>
-                <InViewAnimateBottom className="mx-auto">
+                <InViewAnimateBottom>
                   <p className="text-sm sm:text-lg max-w-[513px] lg:max-w-2xl text-center mx-auto lg:text-xl">
                     Join our mission to expand the scope of human knowledge with
                     BrainDAO, the governing DAO powering the IQ ecosystem.

diff --git a/src/components/layouts/Iqtoken.tsx b/src/components/layouts/Iqtoken.tsx
@@ -9,6 +9,7 @@ import InViewAnimateBottom from "../transitions/InViewAnimateBottom";
 import InViewAnimateSlideDown from "../transitions/InViewSlideDown";
 import InViewAnimateSlideUp from "../transitions/inViewSlideUp";
 import { fetchPriceChange, numFormatter } from "../utils/stats-utils";
+import { motion } from "framer-motion";
 
 export const StatsPointers = ({
   title,
@@ -132,7 +133,7 @@ const Iqtoken = () => {
         />
         <div className="flex flex-col-reverse lg:flex-row items-start mt-16">
           <div className="lg:flex-1 w-full overflow-hidden">
-            <div className="w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative">
+            <InViewAnimateBottom className="w-full md:w-[80%] xl:w-full h-[300px] sm:h-[450px] lg:h-[380px] xl:h-[500px] relative">
               {imageUrl && (
                 <Image
                   src={imageUrl}
@@ -142,15 +143,7 @@ const Iqtoken = () => {
                   className="object-contain"
                 />
               )}
-              <div className="absolute top-0 w-full left-0 h-full flex flex-col">
-                <InViewAnimateSlideUp className="flex-1 overflow-hidden w-full h-full dark:bg-gray800 bg-[#F9FAFB]">
-                  <div className=""></div>
-                </InViewAnimateSlideUp>
-                <InViewAnimateSlideDown className="flex-1 dark:bg-gray800 bg-[#F9FAFB] w-full h-full overflow-hidden">
-                  <div></div>
-                </InViewAnimateSlideDown>
-              </div>
-            </div>
+            </InViewAnimateBottom>
           </div>
           <div className="flex-1">
             <InViewAnimateBottom>

diff --git a/src/components/layouts/braindao-team/index.tsx b/src/components/layouts/braindao-team/index.tsx
@@ -21,9 +21,9 @@ const TeamCard = ({
   wikiLink,
 }: TTeam) => {
   return (
-    <InViewAnimateBottom className="mx-auto w-full max-w-[358px] md:max-w-[328px]">
+    <InViewAnimateBottom className="mx-auto w-full sm:max-w-[351px] md:max-w-[328px]">
       <div className="border dark:bg-gray700 bg-white dark:border-whiteAlpha-400 border-gray200 rounded-xl px-4 py-5">
-        <div className="rounded-md relative h-[373px] md:h-[318px] w-full lg:h-[300px] xl:h-[300px] 2xl:h-[324px] overflow-hidden hover:scale-105 ease-in-out duration-300">
+        <div className="rounded-md relative h-[410px] sm:h-[373px] md:h-[318px] w-full lg:h-[300px] xl:h-[300px] 2xl:h-[324px] overflow-hidden hover:scale-105 ease-in-out duration-300">
           <Image src={src || ""} alt="" fill sizes="50vw" />
           <div className="absolute top-0 left-0 h-full w-full bg-transparent px-5 pb-5 flex flex-col justify-end">
             <div className="dark:bg-gray700 bg-white relative rounded-[4px] py-2 px-1 flex flex-col gap-2 items-center w-full">

diff --git a/src/components/layouts/ecosystem/Iqwiki.tsx b/src/components/layouts/ecosystem/Iqwiki.tsx
@@ -54,9 +54,6 @@ const Iqwiki = () => {
                 sizes="(max-width:500px) 100vw, 50vw"
               />
             )}
-            <InViewAnimateSlideUp className="absolute top-1 left-0 w-full h-4/5 z-10 dark:bg-gray700 bg-white">
-              <div></div>
-            </InViewAnimateSlideUp>
           </div>
         </div>
       </div>

diff --git a/src/components/transitions/InViewAnimateBottom.tsx b/src/components/transitions/InViewAnimateBottom.tsx
@@ -22,26 +22,32 @@ const InViewAnimateBottom: React.FC<TInViewAnimate> = ({
     if (inView && !hasAnimated) {
       setHasAnimated(true);
       animation.start({
-        y: 0,
+        // y: 0,
         opacity: 1,
         transition: {
           type: "tween",
-          duration: 1.2,
+          duration: 1.5,
         },
       });
     }
     if (!inView && !hasAnimated) {
       animation.start({
-        y: "10vw",
-        opacity: 0.5,
+        // y: '100px',
+        opacity: 0,
       });
     }
   }, [animation, delay, inView, hasAnimated]);
 
   return (
-    <div ref={ref} className={`overflow-hidden ${className}`}>
-      <motion.div animate={animation}>{children}</motion.div>
-    </div>
+    <motion.div
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 1.5 }}
+      className={className}
+    >
+      {children}
+    </motion.div>
   );
 };
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -128,6 +128,10 @@ module.exports = {
 					'linear-gradient(360deg, #1A202C 46.49%, rgba(26, 32, 44, 0.00) 86.97%)',
 				'gradient-linear-light':
 					'linear-gradient(3deg, #F9FAFB 46.15%, rgba(255, 255, 255, 0.00) 97.82%)',
+				'video-gradient':
+					'linear-gradient(0deg, #000206 42%, rgba(0, 2, 6, 0.00) 97%)',
+				'video-gradient-top':
+					'linear-gradient(180deg, #000206 42%, rgba(0, 2, 6, 0.00) 97%)',
 			},
 		},
 	},