"use client"; import React, { useEffect, useRef } from "react"; import Image from "next/image"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const images = [ "https://library.rapid-ui.com/images/blocks/parallax3/1.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/2.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/3.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/4.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/5.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/6.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/1.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/2.jpg", "https://library.rapid-ui.com/images/blocks/parallax3/3.jpg", ]; function Parallax3() { const containerRef = useRef(null); const imageRefs = useRef([]); const addToRefs = (el: HTMLImageElement) => { if (el && !imageRefs.current.includes(el)) { imageRefs.current.push(el); } }; useEffect(() => { imageRefs.current.forEach((img) => { gsap.set(img, { scale: 1 }); gsap.fromTo( img, { scale: 1 }, { scale: 0.6, immediateRender: false, scrollTrigger: { trigger: img, start: "top bottom", end: "bottom top", scrub: 0.4, }, } ); }); }, []); return (

{images.map((src, i) => (

))}

); } export { Parallax3 };

slider-3