mirror of
https://github.com/zen-browser/www.git
synced 2025-07-10 18:25:31 +02:00
fix: update animation function and remove unused AnimatedText component
This commit is contained in:
parent
480c0189f0
commit
f90f54ec04
2 changed files with 1 additions and 99 deletions
|
@ -2,7 +2,7 @@
|
|||
export function getTitleAnimation(delay = 0) {
|
||||
return {
|
||||
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 } },
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -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"> </span>
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
))}
|
||||
</motion.span>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue