refactor: add bidirectional scrolling support to InfiniteMovingCards component

- Added infinite-scroll-right keyframe animation with 50% translateX for right direction
- Updated InfiniteMovingCards to conditionally apply animate-infinite-scroll or animate-infinite-scroll-right based on direction prop
- Added animate-infinite-scroll-right class with linear infinite animation using CSS variable duration
This commit is contained in:
2025-11-18 14:43:53 +01:00
parent da5cf2d4a2
commit a4a6c95612
2 changed files with 17 additions and 1 deletions

View File

@@ -58,7 +58,10 @@ export const InfiniteMovingCards = ({
ref={scrollerRef}
className={cn(
"flex w-max shrink-0 gap-16 py-4",
isReady && "animate-infinite-scroll",
isReady &&
(direction === "left"
? "animate-infinite-scroll"
: "animate-infinite-scroll-right"),
pauseOnHover && "hover:[animation-play-state:paused]"
)}
>

View File

@@ -238,7 +238,20 @@
}
}
@keyframes infinite-scroll-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
.animate-infinite-scroll {
animation: infinite-scroll var(--animation-duration, 40s) linear infinite;
animation-direction: var(--animation-direction, forwards);
}
.animate-infinite-scroll-right {
animation: infinite-scroll-right var(--animation-duration, 40s) linear infinite;
}