'use client' import React, { useEffect, useRef } from 'react' import gsap from 'gsap' import Core from 'smooothy' import './style.css'; const slides = [ { id: 1, image: 'https://images.unsplash.com/photo-1524592094714-0f0654e20314?w=800&q=80', size: 'tall', leftText: { top: 'UN', bottom: '001' }, rightText: { top: 'CERAMIC VASE', bottom: 'HANDCRAFTED' } }, { id: 2, image: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=800&q=80', size: 'wide', leftText: { top: 'PR', bottom: '002' }, rightText: { top: 'PEDRO GARCIA', bottom: 'COLLECTION' } }, { id: 3, image: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&q=80', size: 'tall', leftText: { top: 'MN', bottom: '003' }, rightText: { top: 'JULIUS WEILAND', bottom: 'SCULPTURE' } }, { id: 4, image: 'https://images.unsplash.com/photo-1611085583191-a3b181a88401?w=800&q=80', size: 'wide', leftText: { top: 'ST', bottom: '004' }, rightText: { top: 'STEEL', bottom: 'INDUSTRIAL' } }, { id: 5, image: 'https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=800&q=80', size: 'tall', leftText: { top: 'BG', bottom: '005' }, rightText: { top: 'PRADA BEAUTY', bottom: 'CAMPAIGN' } }, { id: 6, image: 'https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=800&q=80', size: 'wide', leftText: { top: 'LT', bottom: '006' }, rightText: { top: 'LEATHER', bottom: 'ACCESSORIES' } }, { id: 7, image: 'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&q=80', size: 'tall', leftText: { top: 'KT', bottom: '007' }, rightText: { top: 'SILK LIGHT', bottom: 'TEXTILE' } }, { id: 8, image: 'https://images.unsplash.com/photo-1611085583191-a3b181a88401?w=800&q=80', size: 'wide', leftText: { top: 'FN', bottom: '008' }, rightText: { top: 'FINE CRAFT MFG', bottom: 'ARTISAN' } }, ] const introSlides = slides.slice(0, 5) const Slider = () => { const wrapperRef = useRef(null) const sliderRef = useRef(null) const slidesRef = useRef([]) const imagesRef = useRef([]) const leftTextRef = useRef(null) const rightTextRef = useRef(null) const introRef = useRef(null) const introCardsRef = useRef([]) const currentSlideRef = useRef(0) const updateText = (slide) => { if (!leftTextRef.current || !rightTextRef.current) return gsap.to([leftTextRef.current, rightTextRef.current], { opacity: .4, duration: .15, onComplete: () => { leftTextRef.current.querySelector('.top').textContent = slide.leftText.top leftTextRef.current.querySelector('.bottom').textContent = slide.leftText.bottom rightTextRef.current.querySelector('.top').textContent = slide.rightText.top rightTextRef.current.querySelector('.bottom').textContent = slide.rightText.bottom gsap.to([leftTextRef.current, rightTextRef.current], { opacity: 1, duration: 0.15 }) } }) } const applyParallax = () => { const center = window.innerHeight / 2 let closest = 0 let minDist = Infinity slidesRef.current.forEach((container, i) => { if (!container || !imagesRef.current[i]) return const rect = container.getBoundingClientRect() const slideCenter = rect.top + rect.height / 2 const dist = Math.abs(slideCenter - center) const offset = (slideCenter - center) / window.innerHeight gsap.set(imagesRef.current[i], { scale: 1.3, y: -offset * 100, }) if (dist < minDist) { minDist = dist closest = i } }) if (currentSlideRef.current !== closest) { currentSlideRef.current = closest updateText(slides[closest]) } } const playIntroAnimation = (wrapper, slider) => { const introCards = introCardsRef.current.filter(Boolean) const intro = introRef.current if (!intro) return gsap.timeline() const vw = window.innerWidth const vh = window.innerHeight const cardSize = 28 const gap = 12 const centerX = vw / 2 const centerY = vh / 2 introCards.forEach((card, i)=>{ const offsetX = (i - 2) * (cardSize + gap) gsap.set(card, { position: 'fixed', left: centerX - cardSize / 2, top: centerY - cardSize / 2, width: cardSize, height: cardSize, x: offsetX, y: 0, zIndex: 60, scale: 0, opacity: 0, force3D: true, }) }) const tl = gsap.timeline({ delay: 0.4 }) tl.to(introCards, { scale: 1, opacity: 1, duration: .7, stagger: .08, ease: 'back.out(1.4)' }) tl.to({}, { duration: 0.35 }) const rotation = { angle: 0 } tl.to(rotation, { angle: 90, duration: 1.3, ease: "power4.inOut", onUpdate: ()=>{ const rad = rotation.angle * Math.PI / 180 introCards.forEach((card, i)=>{ const offset = (i - 2) * (cardSize + gap) gsap.set(card, { x: Math.round(offset * Math.cos(rad)), y: Math.round(offset * Math.sin(rad)), }) }) } }) tl.call(()=>{ const sliderSlides = slidesRef.current.filter(Boolean).slice(0, 5) const targets = sliderSlides.map((el)=>{ const container = el.querySelector('div') const inner = container?.querySelector('div') return (inner || container || el).getBoundingClientRect() }) const lastIdx = introCards.length - 1 introCards.forEach((card, i)=>{ const curX = Number(gsap.getProperty(card, 'left')) + Number(gsap.getProperty(card, 'x')) const curY = Number(gsap.getProperty(card, 'top')) + Number(gsap.getProperty(card, 'y')) const curW = Number(gsap.getProperty(card, 'width')) const curH = Number(gsap.getProperty(card, 'height')) const target = targets[i] || { left: centerX, top: centerY, width: cardSize, height: cardSize } gsap.set(card, { left: target.left, top: target.top, width: target.width, height: target.height, transformOrigin: '0 0', x: curX - target.left, y: curY - target.top, scaleX: curW / target.width, scaleY: curH / target.height, }) gsap.to(card, { x: 0, y: 0, scaleX: 1, scaleY: 1, duration: 1.1, ease: 'power3.inOut', delay: i * 0.03, force3D: true, onComplete: i === lastIdx ? ()=>{ gsap.set(intro, { display: 'none' }) gsap.set(wrapper, { opacity: 1 }) slider.paused = false gsap.to([leftTextRef.current, rightTextRef.current], { opacity: 1, duration: .5, ease: 'power2.out', }) } : undefined, }) const img = card.querySelector('img') if (img){ const targetY = imagesRef.current[i] ? Number(gsap.getProperty(imagesRef.current[i], 'y')) : 0 gsap.to(img,{ scale: 1.3, y: targetY, duration: 1.1, ease: 'power3.inOut', delay: i * 0.03, }) } }) }) return tl } useEffect(() => { const wrapper = wrapperRef.current if (!wrapper) return const preventSelect = (e) => e.preventDefault() wrapper.addEventListener('selectstart', preventSelect) wrapper.style.userSelect = 'none' wrapper.style.webkitUserSelect = 'none' wrapper.style.touchAction = 'pan-y' gsap.set(wrapper, { opacity: 0 }) gsap.set([leftTextRef.current, rightTextRef.current], { opacity: 0 }) const slider = new Core(wrapper, { vertical: true, infinite: true, variableWidth: true, snap: true, snapStrength: 0.1, scrollInput: true, lerpFactor: 0.3, dragSensitivity: 0.004, speedDecay: 1, scrollSensitivity: 1, virtualScroll: { mouseMultiplier: 0.35, touchMultiplier: 1.8, firefoxMultiplier: 25, useKeyboard: true, passive: true } }) sliderRef.current = slider slider.paused = true const update = () => { slider.update() applyParallax() } gsap.ticker.add(update) const introTl = playIntroAnimation(wrapper, slider) return () => { introTl.kill() wrapper.removeEventListener('selectstart', preventSelect) gsap.ticker.remove(update) slider.destroy() } }, []) const getSize = (size) => { return size === 'tall' ? { h: '40vh', w: '15vw' } : { h: '15vw', w: '25vw' } } return (

{introSlides.map((slide, i) => (

(introCardsRef.current[i] = el)} className='overflow-clip' >

))}

{slides[0].leftText.top} {slides[0].leftText.bottom}

{slides[0].rightText.top} {slides[0].rightText.bottom}

{slides.map((slide, i) => { const { h, w } = getSize(slide.size) return (

(slidesRef.current[i] = el)} className='w-full shrink-0 relative flex items-center justify-center' >

(imagesRef.current[i] = el)} src={slide.image} alt="" className='size-full object-cover grayscale' />

) })}

) } export default Slider

saves