forked from emre/www_projectmycelium_com
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:
@@ -58,7 +58,10 @@ export const InfiniteMovingCards = ({
|
|||||||
ref={scrollerRef}
|
ref={scrollerRef}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex w-max shrink-0 gap-16 py-4",
|
"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]"
|
pauseOnHover && "hover:[animation-play-state:paused]"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -238,7 +238,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes infinite-scroll-right {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.animate-infinite-scroll {
|
.animate-infinite-scroll {
|
||||||
animation: infinite-scroll var(--animation-duration, 40s) linear infinite;
|
animation: infinite-scroll var(--animation-duration, 40s) linear infinite;
|
||||||
animation-direction: var(--animation-direction, forwards);
|
animation-direction: var(--animation-direction, forwards);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animate-infinite-scroll-right {
|
||||||
|
animation: infinite-scroll-right var(--animation-duration, 40s) linear infinite;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user