Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-26 05:08:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: correct useSprings implementation in SplitText component

Browse source
This commit is contained in:
Danny Avila 2025-07-15 23:54:16 -04:00 • committed by Marco Beretta
parent 39f5dd47dc
commit 8e1b00da2a
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
1 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

32
packages/client/src/components/SplitText.tsx
View file

@ -77,20 +77,24 @@ const SplitText: React.FC<SplitTextProps> = ({
const ref = useRef<HTMLParagraphElement>(null);
const animatedCount = useRef(0);
const springs = useSprings(letters.length, (i) => ({
from: animationFrom,
to: inView
? async (next) => {
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
const [springs] = useSprings(
letters.length,
(i) => ({
from: animationFrom,
to: inView
? async (next) => {
await next(animationTo);
animatedCount.current += 1;
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
onLetterAnimationComplete();
}
}
}
: animationFrom,
delay: i * delay,
config: { easing },
}));
: animationFrom,
delay: i * delay,
config: { easing },
}),
[inView, text, delay, animationFrom, animationTo, easing, onLetterAnimationComplete],
);
useEffect(() => {
const observer = new IntersectionObserver(
@ -147,7 +151,7 @@ const SplitText: React.FC<SplitTextProps> = ({
return (
<animated.span
key={index}
style={springs[index] as unknown as React.CSSProperties}
style={springs[index]}
className="inline-block transform transition-opacity will-change-transform"
>
{letter}