Animate on new apps

sing1ee · Aug 2, 2024 · c9c5b0d · c9c5b0d
1 parent 64cf4b3
commit c9c5b0d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -38,7 +38,12 @@ export default function Home() {
   async function generateCode(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
 
+    if (status !== "initial") {
+      scrollTo({ delay: 0.5 });
+    }
+
     setStatus("creating");
+    setGeneratedCode("");
 
     let formData = new FormData(e.currentTarget);
     let model = formData.get("model");
@@ -48,8 +53,6 @@ export default function Home() {
     }
     let newMessages = [{ role: "user", content: prompt }];
 
-    setGeneratedCode("");
-
     const chatRes = await fetch("/api/generateCode", {
       method: "POST",
       headers: {
@@ -176,7 +179,7 @@ export default function Home() {
       let end = el.scrollHeight - el.clientHeight;
       el.scrollTo({ top: end });
     }
-  }, [loading]);
+  }, [loading, generatedCode]);
 
   return (
     <div className="mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center py-2">
@@ -294,7 +297,7 @@ export default function Home() {
             }}
             transition={{ type: "spring", bounce: 0, duration: 0.5 }}
             className="w-full pb-[25vh] pt-10"
-            onAnimationComplete={scrollTo}
+            onAnimationComplete={() => scrollTo()}
             ref={ref}
           >
             <div className="mt-5 flex gap-4">

diff --git a/hooks/use-scroll-to.ts b/hooks/use-scroll-to.ts
@@ -1,24 +1,22 @@
 import { animate, ValueAnimationTransition } from "framer-motion";
 import { useRef } from "react";
 
-export function useScrollTo(
-  options: ValueAnimationTransition = {
-    type: "spring",
-    bounce: 0,
-    duration: 0.6,
-  },
-) {
+export function useScrollTo() {
   let ref = useRef<HTMLDivElement>(null);
 
-  function scrollTo() {
+  function scrollTo(options: ValueAnimationTransition = {}) {
     if (!ref.current) return;
 
+    let defaultOptions: ValueAnimationTransition = {
+      type: "spring",
+      bounce: 0,
+      duration: 0.6,
+    };
+
     animate(window.scrollY, ref.current.offsetTop, {
+      ...defaultOptions,
       ...options,
-      onUpdate: (latest) => {
-        // console.log(latest);
-        window.scrollTo({ top: latest });
-      },
+      onUpdate: (latest) => window.scrollTo({ top: latest }),
     });
   }