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) {
|
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 } },
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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