49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
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;
|
|
styles: string;
|
|
duration: number;
|
|
delay: number;
|
|
};
|
|
|
|
const FramerTextAnimate = ({ children, styles, duration, delay }: 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(() => {
|
|
// 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 (
|
|
<>
|
|
<motion.span className={`${special_elite.className} ${styles}`}>
|
|
{displayText}
|
|
</motion.span>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default FramerTextAnimate;
|