140 lines
3.8 KiB
TypeScript
140 lines
3.8 KiB
TypeScript
import { AnimatePresence, motion, useInView } from "framer-motion";
|
|
import React, { ReactElement, useEffect, useMemo, useState, useRef } from "react";
|
|
|
|
|
|
export const ArticleList = React.memo(
|
|
({
|
|
className,
|
|
children,
|
|
delay = 1000,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
delay?: number;
|
|
}) => {
|
|
const [index, setIndex] = useState(0);
|
|
|
|
const childrenArray = React.Children.toArray(children);
|
|
|
|
const ref = useRef(null);
|
|
const inView = useInView(ref);
|
|
|
|
useEffect(() => {
|
|
if (inView) {
|
|
const interval = setInterval(() => {
|
|
setIndex((prevIndex) => {
|
|
if (prevIndex >= childrenArray.length - 1) {
|
|
clearInterval(interval); // Stop the interval when the last item is reached
|
|
return prevIndex;
|
|
}
|
|
return prevIndex + 1;
|
|
});
|
|
}, delay);
|
|
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [childrenArray.length, delay, inView]);
|
|
|
|
const itemsToShow = useMemo(
|
|
() => childrenArray.slice(0, index + 1).reverse(),
|
|
[index, childrenArray],
|
|
);
|
|
|
|
return (
|
|
<div className={`flex flex-col items-center gap-4 ${className}`} ref={ref}>
|
|
<AnimatePresence>
|
|
{itemsToShow.map((item) => (
|
|
<ArticleListItem key={(item as ReactElement).key}>{item}</ArticleListItem>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
// translate: none; rotate: none; scale: none; opacity: 1; visibility: inherit; transform: translate(0px, 0px);
|
|
|
|
export function ArticleListItem({ children }: { children: React.ReactNode }) {
|
|
const animations = {
|
|
initial: { scale: 0, opacity: 0 },
|
|
whileInView: { opacity: 1 },
|
|
viewport: { once: true, amount: 0.5 },
|
|
animate: { scale: 1, opacity: 1, originY: 0 },
|
|
exit: { scale: 0, opacity: 0 },
|
|
transition: { type: "spring", stiffness: 350, damping: 40 },
|
|
};
|
|
return (
|
|
<motion.div {...animations} layout className="mx-auto">
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export const AnimatedList = React.memo(
|
|
({
|
|
className,
|
|
children,
|
|
delay = 1000,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
delay?: number;
|
|
}) => {
|
|
const [index, setIndex] = useState(0);
|
|
|
|
const childrenArray = React.Children.toArray(children);
|
|
|
|
const ref = useRef(null);
|
|
const inView = useInView(ref);
|
|
|
|
useEffect(() => {
|
|
if (inView) {
|
|
const interval = setInterval(() => {
|
|
setIndex((prevIndex) => {
|
|
if (prevIndex >= childrenArray.length - 1) {
|
|
clearInterval(interval); // Stop the interval when the last item is reached
|
|
return prevIndex;
|
|
}
|
|
return prevIndex + 1;
|
|
});
|
|
}, delay);
|
|
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [childrenArray.length, delay, inView]);
|
|
|
|
const itemsToShow = useMemo(
|
|
() => childrenArray.slice(0, index + 1).reverse(),
|
|
[index, childrenArray],
|
|
);
|
|
|
|
return (
|
|
<div className={`flex flex-col items-center gap-4 ${className}`} ref={ref}>
|
|
<AnimatePresence>
|
|
{itemsToShow.map((item) => (
|
|
<AnimatedListItem key={(item as ReactElement).key}>{item}</AnimatedListItem>
|
|
))}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
AnimatedList.displayName = "AnimatedList";
|
|
|
|
export function AnimatedListItem({ children }: { children: React.ReactNode }) {
|
|
const animations = {
|
|
initial: { scale: 0, opacity: 0 },
|
|
whileInView: { opacity: 1 },
|
|
viewport: { once: true, amount: 0.5 },
|
|
animate: { scale: 1, opacity: 1, originY: 0 },
|
|
exit: { scale: 0, opacity: 0 },
|
|
transition: { type: "spring", stiffness: 350, damping: 40 },
|
|
};
|
|
return (
|
|
<motion.div {...animations} layout className="mx-auto">
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|