fix: update animation function and remove unused AnimatedText component

This commit is contained in:
mr. M 2025-01-03 00:17:31 +01:00
parent 480c0189f0
commit f90f54ec04
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 1 additions and 99 deletions

View file

@ -2,7 +2,7 @@
export function getTitleAnimation(delay = 0) { export function getTitleAnimation(delay = 0) {
return { return {
initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' }, initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' },
whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay } }, animate: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay } },
}; };
} }

View file

@ -1,98 +0,0 @@
import { motion, useInView, useAnimation } from "motion/react";
import { useEffect, useRef, type JSX } from "react";
type AnimatedTextProps = {
text: string | string[];
el?: keyof JSX.IntrinsicElements;
className?: string;
once?: boolean;
repeatDelay?: number;
animation?: {
hidden: any;
visible: any;
};
};
const defaultAnimations = {
hidden: {
opacity: 0,
y: 20,
},
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.1,
},
},
};
export const AnimatedText = ({
text,
el: Wrapper = "p",
className,
once,
repeatDelay,
animation = defaultAnimations,
}: AnimatedTextProps) => {
const controls = useAnimation();
const textArray = Array.isArray(text) ? text : [text];
const ref = useRef(null);
const isInView = useInView(ref, { amount: 0.5, once });
useEffect(() => {
let timeout: NodeJS.Timeout;
const show = () => {
controls.start("visible");
if (repeatDelay) {
timeout = setTimeout(async () => {
await controls.start("hidden");
controls.start("visible");
}, repeatDelay);
}
};
if (isInView) {
show();
} else {
controls.start("hidden");
}
return () => clearTimeout(timeout);
}, [isInView]);
return (
<Wrapper className={className}>
<span className="sr-only">{textArray.join(" ")}</span>
<motion.span
ref={ref}
initial="hidden"
animate={controls}
variants={{
visible: { transition: { staggerChildren: 0.1 } },
hidden: {},
}}
aria-hidden
>
{textArray.map((line, lineIndex) => (
<span className="block" key={`${line}-${lineIndex}`}>
{line.split(" ").map((word, wordIndex) => (
<span className="inline-block" key={`${word}-${wordIndex}`}>
{word.split("").map((char, charIndex) => (
<motion.span
key={`${char}-${charIndex}`}
className="inline-block"
variants={animation}
>
{char}
</motion.span>
))}
<span className="inline-block">&nbsp;</span>
</span>
))}
</span>
))}
</motion.span>
</Wrapper>
);
};