From c41c25c59925d7d43799a54e288bb32d132f5294 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Ca=C5=82a?= Date: Wed, 8 Nov 2023 19:51:55 +0100 Subject: [PATCH 1/2] added animated about me description --- src/app/about/page.tsx | 7 ++++ src/app/contact/page.tsx | 1 + src/components/framer/framerTextAnimate.tsx | 41 +++++++++++++++++++++ 3 files changed, 49 insertions(+) create mode 100644 src/components/framer/framerTextAnimate.tsx diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index bc4f4bd..b7d4f5f 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -1,10 +1,17 @@ import Stars from "@/components/stars"; import React from "react"; +import FramerTextAnimate from "@/components/framer/framerTextAnimate"; + +const aboutMeText = + "I am a one-person studio with over 1.5 years of experience in organic 3D modeling and resin 3D printing. My work primarily focuses on themes of alien/cosmic horror, although I often strain towards classic themes of daemonic fiends and monsters from high fantasy. Most of conceptual work is done in Blender, while i tend to incorporate ZBRUSH for the rest of the process."; const page = () => { return (
+
+ {aboutMeText} +
); }; diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index bc4f4bd..fbdd8bd 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -5,6 +5,7 @@ const page = () => { return (
+
); }; diff --git a/src/components/framer/framerTextAnimate.tsx b/src/components/framer/framerTextAnimate.tsx new file mode 100644 index 0000000..70d818d --- /dev/null +++ b/src/components/framer/framerTextAnimate.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { Center } from "@react-three/drei"; +import { animate, motion, useMotionValue, useTransform } from "framer-motion"; +import { Special_Elite } from "next/font/google"; +import React, { useEffect } from "react"; + +const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] }); + +type props = { children: string }; + +const FramerTextAnimate = ({ children }: props) => { + const count = useMotionValue(0); + const baseText = children as string; + + const rounded = useTransform(count, (latest) => Math.round(latest)); + const displayText = useTransform(rounded, (latest) => + baseText.slice(0, latest) + ); + + useEffect(() => { + const controls = animate(count, baseText.length, { + // type: "tween", // Not really needed because adding a duration will force "tween" + duration: 15, + ease: "easeInOut", + }); + return controls.stop; + }, []); + + return ( + <> + + {displayText} + + + ); +}; + +export default FramerTextAnimate; From cb13ebd116642b9500bb7a277a35730d78a7b4e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Ca=C5=82a?= Date: Wed, 8 Nov 2023 20:15:00 +0100 Subject: [PATCH 2/2] refactored framer component, added animations to homepage menu and fixed issue related to rendering multiple framer components at once (don't do it, add a delay) --- src/app/about/page.tsx | 10 ++++- src/app/page.tsx | 41 ++++++++++++++++++--- src/components/framer/framerTextAnimate.tsx | 31 ++++++++++------ 3 files changed, 63 insertions(+), 19 deletions(-) diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index b7d4f5f..b345029 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -10,7 +10,15 @@ const page = () => {
- {aboutMeText} + + {aboutMeText} +
); diff --git a/src/app/page.tsx b/src/app/page.tsx index 4ccd570..d1ec954 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,21 +1,50 @@ import Stars from "@/components/stars"; import Skeleton from "@/components/mesh/skeleton"; import Link from "next/link"; -import { Suspense } from "react"; +import FramerTextAnimate from "@/components/framer/framerTextAnimate"; + +const about = "ABOUT ME"; +const models = "MY MODELS"; +const contact = "CONTACT ME"; export default function Home() { return (
-
- - ABOUT ME + +
+ + + {about} + - MY MODELS + + {models} + - CONTACT + + {contact} +
diff --git a/src/components/framer/framerTextAnimate.tsx b/src/components/framer/framerTextAnimate.tsx index 70d818d..bab058f 100644 --- a/src/components/framer/framerTextAnimate.tsx +++ b/src/components/framer/framerTextAnimate.tsx @@ -1,15 +1,19 @@ "use client"; -import { Center } from "@react-three/drei"; import { animate, motion, useMotionValue, useTransform } from "framer-motion"; import { Special_Elite } from "next/font/google"; import React, { useEffect } from "react"; const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] }); -type props = { children: string }; +type props = { + children: string; + styles: string; + duration: number; + delay: number; +}; -const FramerTextAnimate = ({ children }: props) => { +const FramerTextAnimate = ({ children, styles, duration, delay }: props) => { const count = useMotionValue(0); const baseText = children as string; @@ -19,19 +23,22 @@ const FramerTextAnimate = ({ children }: props) => { ); useEffect(() => { - const controls = animate(count, baseText.length, { - // type: "tween", // Not really needed because adding a duration will force "tween" - duration: 15, - ease: "easeInOut", - }); - return controls.stop; + // Delay the animation start + const delayTimeout = setTimeout(() => { + const controls = animate(count, baseText.length, { + duration: duration, + ease: "easeInOut", + }); + return () => controls.stop(); + }, delay * 1000); + + // Clear the timeout on unmount to prevent memory leaks + return () => clearTimeout(delayTimeout); }, []); return ( <> - + {displayText}