'use client'; import { sampleClothes } from '@/modules/carousel/data/sample.data'; import Image from 'next/image'; import { useGSAP } from '@gsap/react'; import Observer from 'gsap/Observer'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import gsap from 'gsap'; import { useRef, useState } from 'react'; import { randomBetween } from '@/lib'; import { RefreshCcwIcon } from 'lucide-react'; import { motion } from 'motion/react'; gsap.registerPlugin(Observer, useGSAP, ScrollTrigger); const ImageShowcase = () => { const [key, setKey] = useState(0); const containerRef = useRef(null); useGSAP( () => { if (containerRef.current) { const cards = containerRef.current.querySelectorAll('.image-card'); gsap.fromTo( cards, { scale: 0, filter: 'blur(10px)', rotate: () => randomBetween(-80, -20), }, { scale: 1, filter: 'blur(0px)', rotate: () => randomBetween(-5, 8), ease: 'elastic.out(0.4, 0.3, 0.1)', // spring-like duration: 0.85, stagger: 0.1, scrollTrigger: { trigger: containerRef.current, scrub: false, start: 'top 60%', end: '+=\\${ window.innerHeight / 1.2 }', }, } ); } }, { dependencies: [key], scope: containerRef } ); return (

{sampleClothes.map((img, idx) => { return (

); })}

); }; export default ImageShowcase;

Image Showcase