finishing third section animation , it looks great !

ZakGmd · Mar 22, 2024 · 27863f3 · 27863f3
1 parent ba29307
commit 27863f3
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 23 deletions.
diff --git a/app/fourth/page.tsx b/app/fourth/page.tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import Popup from "../ui/popup";
 import AiText from "../ui/aiText";
+import Prompt from "../ui/prompt";
 
 export default function Fourth(){
 
@@ -24,19 +25,13 @@ export default function Fourth(){
               <Link href={""} className="flex justify-center items-center gap-[10px] rounded-[56px] py-[12px] px-6 bg-gradient-to-br from-[#4339BF] from-[74.55%] to-[#2E1C62] to-[131.94%] text-white text-[18px] font-medium leading-[20px] tracking-[-0.36px]">Get started</Link>
              </div>
              <div className="flex flex-col gap-[26px] items-start pl-[50.51px] pt-[29px] pr-[42px]  ">
-                <AiText classname={"secondAiText max-w-[330px]"} texts={"Hello Moussaab! I'm Otsu, your personal productivity partner. Let's elevate your efficiency and scale new heights together."}/>
+                <AiText classname={"secondAiText max-w-[330px]"} texts={"Hello Moussaab! I'm Otsu, your personal productivity partner. Let's elevate your efficiency and scale new heights together."} aiClass={"secondAiLogo"}/>
                 <div className="flex items-center justify-between w-full gap-[100px]">
                     <Popup title="Documents" comment="Adding 213 new files" src="document.svg" classname={"firstPopup"} />
-                    <div className="pt-[5px] inline-flex items-center gap-4 pl-1 ">
-                        <div className="w-[300px] text-right text-[16px] font-normal leading-5 tracking-[-0.32px] text-white/90 ">Can you help me with my schedule?</div>
-                        <Image src={"avatar.svg"} alt={"avatarLogoEmpty"} width={28} height={28} className="z-10"/>
-                    </div>
+                    <Prompt props={"Can you help me with my schedule?"} classname={"secondPrompt"} />
                 </div>
                 <div className="flex items-center relative  w-full ">
-                  <div className="inline-flex items-start gap-4 max-w-[380px]">
-                        <Image src={"aiAvatar.svg"} alt={"avatar for ai svg"} width={28} height={28} className="z-20"/>
-                        <div className="text-[16px] font-normal leading-5 tracking-[-0.32px] bg-clip-text text-transparent bg-gradient-to-b from-white from-4.91% to-transparent to-40.91% flex-1  ">Need assistance with your schedule? Say no more. Let&apos;s synchronize your calendars and start optimizing your time right away.</div>
-                  </div>
+                  <AiText classname={"thirdAiText max-w-[330px]"} texts={"Need assistance with your schedule? Say no more. Let's synchronize your calendars and start optimizing your time right away."} aiClass={"thirdAiLogo"}/>
                   <Popup title="Inbox" comment="You have new emails." src="analytics.svg" classname="absolute right-[-134px] secondPopup" />
 
                 </div>

diff --git a/app/ui/aiText.tsx b/app/ui/aiText.tsx
@@ -4,20 +4,25 @@ import { useRef } from "react";
 import gsap from "gsap";
 import { useGSAP } from "@gsap/react";
 import SplitText from "gsap-trial/SplitText" ;
-
 gsap.registerPlugin(useGSAP);
 gsap.registerPlugin(SplitText) ;
 
-export default function AiText({classname , texts}:{classname: string , texts: string}){
+interface AiTypes{
+  classname: string ;
+  texts: string ; 
+  aiClass: string ;
+}
+export default function AiText({classname , texts , aiClass}:AiTypes){
     const textsContainer = useRef(null) ;
     const aiAvatar = useRef(null) ;
 
     useGSAP(() => {
         var splitFirstText = new SplitText('.firstAiText',{type: "chars"});
         var splitSecondText = new SplitText('.secondAiText',{type: "words"}) ;
+        var splitThirdText = new SplitText('.thirdAiText',{type: "words"}) ;
 
         const tl = gsap.timeline() ;
-        tl.from(aiAvatar.current,{
+        tl.from(".firstAiLogo",{
           autoAlpha: 0 ,
           y:30 ,
           ease: "power2.out" ,
@@ -27,17 +32,29 @@ export default function AiText({classname , texts}:{classname: string , texts: s
             autoAlpha: 0 ,
             stagger: 0.02 ,
         }).from(splitSecondText.words,{
-
           autoAlpha: 0 ,
           stagger: 0.08 ,
-        },"-=1.5")
+        },"-=1.5").from(".secondAiLogo",{
+          autoAlpha: 0 ,
+          y:30 ,
+          ease: "power2.out" ,
+          duration: 0.4 ,
+        },"-=2.1").from(splitThirdText.words,{
+          autoAlpha: 0 ,
+          stagger: 0.08 ,
+        },"+=1").from(".thirdAiLogo",{
+          autoAlpha: 0 ,
+          y:30 ,
+          ease: "power2.out" ,
+          duration: 0.4 ,
+        },"-=2.1")
 
       },{scope: textsContainer})
     return(
         <div ref={textsContainer}>
           <div className="inline-flex items-start gap-4 ">
-           <Image src={"aiAvatar.svg"} alt={"avatar for ai"} width={28} height={28} ref={aiAvatar} />
-           <div className={` ${classname} flex-1 text-white/70 text-[16px] leading-5 tracking-[-0.32px] `}>{texts}</div>
+           <Image src={"aiAvatar.svg"} alt={"avatar for ai"} width={28} height={28} ref={aiAvatar} className={`${aiClass} z-20`} />
+           <div className={` ${classname} flex-1 text-white/60 text-[16px] leading-5 tracking-[-0.32px]  `}>{texts}</div>
           </div>
         </div>
 

diff --git a/app/ui/card.tsx b/app/ui/card.tsx
@@ -35,11 +35,11 @@ export default function Card(){
         <div className="w-full relative flex flex-col items-center justify-center mt-[64px]" ref={container}>
             <div className="absolute shape top-[100px] w-[588px] h-[323px] shrink-0 rounded-[16px] bg-[#5458dfb3] blur-[242px] -z-10"></div>
             <div className="max-w-[631px] w-full h-[340px]   shrink-0 rounded-2xl border border-white/15 bg-gradient-to-b from-[#1c1926f5] from-[-10.57%] to-[#000000f5] to-133.78% shadow-[0px_5px_4px_-1px_rgba(0, 0, 0, 0.15), 0px_0px_20px_0px_rgba(255, 255, 255, 0.03)]">
-                <div className="flex flex-col gap-[26px] items-start ">
+                <div className="flex flex-col gap-[26px] items-start  ">
                     <div className="px-[60px] pt-[31px] w-full flex flex-col gap-[23px]  ">
                         <div className="text-center date text-[13px] font-medium leading-5 tracking-[-0.26px] text-white/80 ">Today <span className="text-white/50">04:20 PM</span></div>
                         <Prompt props={"I need some leads!"} classname={"firstPrompt"} />
-                        <AiText classname={"firstAiText max-w-[286px]"} texts={"Absolutely, I can help with that! I've just scoured the internet for potential leads that align with our targets."} />
+                        <AiText classname={"firstAiText max-w-[286px]"} texts={"Absolutely, I can help with that! I've just scoured the internet for potential leads that align with our targets."} aiClass={"firstAiLogo"} />
                     </div>
                     <div className="flex items-start gap-[21px] ml-[-60px]">
                         <Cards title={"Bryn Booker"} comment={"CEO @bookerai"} src={"cardAvatar1.svg"} classname={"-rotate-2 hover:rotate-[-4deg] "} />

diff --git a/app/ui/popup.tsx b/app/ui/popup.tsx
@@ -22,7 +22,19 @@ export default function Popup({title , comment ,src , classname}:PopupTypes) {
         y: 43.55 ,
         duration: 0.4 ,
         ease:"power2.out" ,
-      },"+=1")
+      },"+=2.675").from(".secondPopup",{
+        autoAlpha: 0 ,
+        scale: 0.75,    
+        y: 43.55 ,
+        duration: 0.4 ,
+        ease:"power2.out" ,
+      },"+=1.8").from(".thirdPopup",{
+        autoAlpha: 0 ,
+        scale: 0.75,    
+        y: 43.55 ,
+        duration: 0.4 ,
+        ease:"power2.out" ,
+      },"+=0.4")
   },{scope: popup})
   return (
     <div ref={popup}>

diff --git a/app/ui/prompt.tsx b/app/ui/prompt.tsx
@@ -10,18 +10,23 @@ export default function Prompt({props , classname}:{props: string , classname: s
 
     useGSAP(()=>{
         const tl = gsap.timeline() ;
-        tl.from(prompt.current,{
+        tl.from(".firstPrompt",{
+            autoAlpha: 0 ,
+            y: 100 ,
+            duration: 0.4 ,
+            ease: "power2.out", 
+        },"+=0.96").from(".secondPrompt",{
             autoAlpha: 0 ,
             y: 100 ,
             duration: 0.4 ,
             ease: "power2.out", 
         },"+=0.96")
-    })
+    },{scope: prompt})
 
     return(
-        <div ref={prompt}>
+        <div ref={prompt} className="justify-end flex">
           <div className={` ${classname} pt-[5px] inline-flex items-center gap-4 pl-1 `}>
-            <div className="textAnimate max-w-[430px] w-full text-right text-[16px] font-normal leading-5 tracking-[-0.32px] text-white/90 ">{props}</div>
+            <div className=" max-w-[430px] w-full text-right text-[16px] font-normal leading-5 tracking-[-0.32px] text-white/80 ">{props}</div>
             <Image src={"avatar.svg"} alt={"avatarLogoEmpty"} width={28} height={28} className="avatarAnimate"/>
           </div>
         </div>