59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { motion, AnimatePresence, useTransform, MotionValue } from 'motion/react';
|
|
|
|
interface ScrollSliderProps {
|
|
scrollYProgress: MotionValue<number>;
|
|
images: { name: string; image: string }[];
|
|
}
|
|
|
|
export default function ScrollSlider({ scrollYProgress, images }: ScrollSliderProps) {
|
|
const x = useTransform(scrollYProgress, [0, 1 / 3], ["4.236vw", "-20.868vw"]);
|
|
|
|
const width1 = useTransform(
|
|
scrollYProgress,
|
|
[0, 1 / 3],
|
|
["20.139vw", "20.139vw"]
|
|
);
|
|
|
|
const width2 = useTransform(
|
|
scrollYProgress,
|
|
[0, 1 / 3],
|
|
["36.944vw", "20.139vw"]
|
|
);
|
|
|
|
const width3 = useTransform(
|
|
scrollYProgress,
|
|
[0, 1 / 3],
|
|
["20.139vw", "36.944vw"]
|
|
);
|
|
|
|
const width4 = useTransform(
|
|
scrollYProgress,
|
|
[0, 1 / 3],
|
|
["20.139vw", "20.139vw"]
|
|
);
|
|
|
|
return (
|
|
<motion.div
|
|
className="flex items-center 2xl:gap-[4.965vw] gap-[9.375vw] 2xl:min-h-[27.639vw] max-2xl:hidden"
|
|
style={{ x }}
|
|
>
|
|
<AnimatePresence>
|
|
{images.map(({ name, image }, index) => (
|
|
<motion.div
|
|
key={name}
|
|
className="flex flex-col shrink-0 items-center 2xl:gap-[1.667vw] gap-6"
|
|
style={{ width: [width1, width2, width3, width4][index] }}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
className="2xl:rounded-[1.667vw] rounded-[3.125vw] aspect-[290/205] object-cover w-full pointer-events-none"
|
|
/>
|
|
<p className={"text-h4 text-center font-medium"}>{name}</p>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
);
|
|
}
|