"use client"; import { useScroll, useTransform } from "framer-motion"; import { useRef } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; export const ParallaxScrollSecond = ({ images, className, }: { images: string[]; className?: string; }) => { const gridRef = useRef(null); const { scrollYProgress } = useScroll({ container: gridRef, // remove this if your container is not fixed height offset: ["start start", "end start"], // remove this if your container is not fixed height }); const translateYFirst = useTransform(scrollYProgress, [0, 1], [0, -200]); const translateXFirst = useTransform(scrollYProgress, [0, 1], [0, -200]); const rotateXFirst = useTransform(scrollYProgress, [0, 1], [0, -20]); const translateYThird = useTransform(scrollYProgress, [0, 1], [0, -200]); const translateXThird = useTransform(scrollYProgress, [0, 1], [0, 200]); const rotateXThird = useTransform(scrollYProgress, [0, 1], [0, 20]); const third = Math.ceil(images.length / 3); const firstPart = images.slice(0, third); const secondPart = images.slice(third, 2 * third); const thirdPart = images.slice(2 * third); return (

{firstPart.map((el, idx) => ( thumbnail

))}

{secondPart.map((el, idx) => ( thumbnail

))}

{thirdPart.map((el, idx) => ( thumbnail

))}

); };