fix(transition): fix issue with transition on smaller devices

Show animation when 30% of component is shown instead of 50%
Aeonoi · Oct 31, 2024 · 08c1a86 · 08c1a86
1 parent 448034c
commit 08c1a86
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/components/project-card.tsx b/components/project-card.tsx
@@ -45,7 +45,7 @@ const ProjectCard: React.FC<Props> = ({
           {/* </motion.div> */}
         </div>
         <div className="p-8">
-          <p className="mt-2 text-sm text-catppuccin_teal font-semibold">
+          <p className="mt-2 text-md text-catppuccin_teal font-semibold">
             {description}
           </p>
         </div>

diff --git a/components/transition.tsx b/components/transition.tsx
@@ -13,7 +13,7 @@ const Transition: React.FC<Props> = ({ children }) => {
       whileInView={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.5, ease: "easeInOut", delay: 0.2 }}
-      viewport={{ once: false, amount: 0.5 }}
+      viewport={{ once: false, amount: 0.3 }}
       className="pt-14"
     >
       {children}