From e6c58e6daad236b95a49952d3776b90c9b065fd6 Mon Sep 17 00:00:00 2001
From: tymur999 <tymur.arsent@gmail.com>
Date: Sat, 19 Oct 2024 17:51:17 -0400
Subject: [PATCH] initial animation

---
 src/app/landing/page.tsx | 25 ++++++++++++++++++++-----
 src/app/landing/time.tsx |  8 ++++++--
 src/app/layout.tsx       |  2 +-
 3 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/src/app/landing/page.tsx b/src/app/landing/page.tsx
index fdc8d22..7090f55 100644
--- a/src/app/landing/page.tsx
+++ b/src/app/landing/page.tsx
@@ -3,16 +3,31 @@
 import arrow from "../../img/arrow.png";
 import gradient from "../../img/gradient.png";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Time } from "@/app/landing/time";
+import { motion } from "framer";
+import {useAnimate} from "framer-motion";
 
+const slides = [<Time/>];
 export default function Landing() {
     const [clicked1, setClicked1] = useState(false);
+    const [scope, animate] = useAnimate();
+    const [animated, setAnimated] = useState(false);
 
-    return clicked1 ? (
-        <Time />
+    useEffect(() => {
+        if(!clicked1)
+            return;
+        animate(scope.current, {y:"100vh"});
+        setAnimated(true);
+    }, [animate, scope, clicked1]);
+
+    return clicked1 && animated ? (
+        <Time
+        />
     ) : (
-        <div
+        <motion.div
+            initial={{y: 0}}
+            ref={scope}
             onMouseDown={() => setClicked1(true)}
             className="flex-grow flex flex-col"
         >
@@ -40,6 +55,6 @@ export default function Landing() {
                 width={window.innerWidth}
                 src={gradient}
             />
-        </div>
+        </motion.div>
     );
 }
diff --git a/src/app/landing/time.tsx b/src/app/landing/time.tsx
index 648d75a..47e544e 100644
--- a/src/app/landing/time.tsx
+++ b/src/app/landing/time.tsx
@@ -1,13 +1,17 @@
 "use client"
 import 'react-circular-progressbar/dist/styles.css';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import { motion } from 'framer';
 // import { useState } from "react";
 
 export function Time() {
     // const [secondsLeft, _setSecondsLeft] = useState(100);
     const percentage = 66;
 
-    return <div className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
+    return <motion.div
+        initial={{y: 500}}
+        animate={{y: 0}}
+        className="absolute top-0 z-[-999] flex flex-col bg-[#ff5757] h-full w-full items-center justify-center">
         <h1 className="absolute text-9xl font-bold drop-shadow-md shadow-black">
             {
                 Math.trunc(100 / 60)
@@ -22,5 +26,5 @@ export function Time() {
                     strokeLinecap: "butt"
                 })} value={percentage} />
         </div>
-    </div>
+    </motion.div>
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8815d66..1f36f0c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
     <body
-        className="antialiased h-[100vh] flex flex-col"
+        className="antialiased overflow-hidden h-[100vh] flex flex-col"
     >
         <div className="flex w-100 p-5 text-5xl text-center flex-shrink py-6">
             <h1 className={raleway_heavy.className + " top-[20px] absolute left-[50%] translate-x-[-50%]"}>
