'use client'; import { useRef, useCallback, useEffect, useState } from 'react'; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; import './image-follow-list.css'; if (typeof window !== 'undefined') { gsap.registerPlugin(useGSAP); } // Calculate offset based on position and image size const getPositionOffsets = (position, imageSize) => { const imageHeight = imageSize * 0.75; // 4:3 aspect ratio const gap = 5; switch (position) { case 'right': return { offsetX: gap, offsetY: -imageHeight / 2 }; case 'bottom': return { offsetX: -imageSize / 2, offsetY: gap }; case 'left': return { offsetX: -(imageSize + gap), offsetY: -imageHeight / 2 }; case 'top': default: return { offsetX: -imageSize / 2, offsetY: -(imageHeight + gap) }; } }; /** * ImageFollowList Component * Interactive list with floating images that follow cursor on hover. * Images reveal with velocity-based rotation effect. * * @param {string} [className=''] - Additional CSS classes * @param {Array} items - List items with text and image { text, imageSrc, imageAlt } * @param {number} [duration=0.5] - Animation duration * @param {string} [ease='expo.out'] - Easing function * @param {string} [position='top'] - Image position relative to cursor (top, right, bottom, left) * @param {number} [imageSize=200] - Image width in pixels * @param {number} [maxRotation=25] - Maximum rotation in degrees * @param {number} [followSpeed=0.6] - Cursor follow lag (higher = more lag) */ export default function ImageFollowList({ className = '', items = [], duration = 0.5, ease = 'expo.out', position = 'top', imageSize = 200, maxRotation = 25, followSpeed = 0.6, }) { const containerRef = useRef(null); const imagesContainerRef = useRef(null); const imageRefs = useRef([]); const itemRefs = useRef([]); // Animation state refs const posRef = useRef({ x: 0, y: 0 }); const prevPosRef = useRef({ x: 0, y: 0 }); const velocityRef = useRef({ x: 0, y: 0 }); const rotationRef = useRef(0); const targetRotationRef = useRef(0); const rafIdRef = useRef(null); const lastTimeRef = useRef(0); const currentImageIndexRef = useRef(-1); const isHoveringRef = useRef(false); const xToRef = useRef(null); const yToRef = useRef(null); // Calculate offsets const offsets = getPositionOffsets(position, imageSize); const { contextSafe } = useGSAP({ scope: containerRef }); // Get hovered item index from mouse position const getHoveredItemIndex = useCallback((mouseX, mouseY) => { for (let i = 0; i < itemRefs.current.length; i++) { const item = itemRefs.current[i]; if (!item) continue; const rect = item.getBoundingClientRect(); if ( mouseY >= rect.top && mouseY <= rect.bottom && mouseX >= rect.left && mouseX <= rect.right ) { return i; } } return -1; }, []); // Show image at index const showImage = contextSafe((index) => { if (!imagesContainerRef.current) return; const wasHovering = isHoveringRef.current; currentImageIndexRef.current = index; isHoveringRef.current = true; // Show container if not already visible if (!wasHovering) { // Set initial position before showing gsap.set(imagesContainerRef.current, { x: posRef.current.x, y: posRef.current.y, }); gsap.fromTo( imagesContainerRef.current, { opacity: 0, scale: 0.5 }, { opacity: 1, scale: 1, duration: duration * 0.6, ease: 'back.out(1.7)', force3D: true, } ); } // Hide all other images instantly imageRefs.current.forEach((img, i) => { if (img && i !== index) { gsap.killTweensOf(img); gsap.set(img, { opacity: 0, scale: 0.5 }); } }); // Show current image const currentImg = imageRefs.current[index]; if (currentImg) { gsap.killTweensOf(currentImg); gsap.fromTo( currentImg, { opacity: 0, scale: 0.5 }, { opacity: 1, scale: 1, duration: duration * 0.5, ease: 'back.out(1.4)', force3D: true, } ); } }); // Hide image const hideImage = contextSafe(() => { isHoveringRef.current = false; currentImageIndexRef.current = -1; if (imagesContainerRef.current) { gsap.to(imagesContainerRef.current, { opacity: 0, scale: 0, duration: duration * 0.6, ease, force3D: true, }); } imageRefs.current.forEach((img) => { if (img) { gsap.to(img, { opacity: 0, scale: 0, duration: duration * 0.4, ease, force3D: true, }); } }); }); // Move container (called from mousemove) const moveContainer = useCallback(() => { if (!isHoveringRef.current) return; xToRef.current?.(posRef.current.x); yToRef.current?.(posRef.current.y); }, []); // Mouse move handler const handleMouseMove = useCallback((e) => { posRef.current.x = e.clientX + offsets.offsetX; posRef.current.y = e.clientY + offsets.offsetY; moveContainer(); const hoveredIndex = getHoveredItemIndex(e.clientX, e.clientY); if (hoveredIndex !== -1 && hoveredIndex !== currentImageIndexRef.current) { showImage(hoveredIndex); } }, [offsets.offsetX, offsets.offsetY, getHoveredItemIndex, moveContainer, showImage]); // Mouse leave handler const handleMouseLeave = useCallback(() => { hideImage(); }, [hideImage]); // Initialize animation useGSAP(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (window.matchMedia('(hover: none)').matches) return; // Skip on touch devices if (!imagesContainerRef.current) return; // Set CSS custom property for image size containerRef.current?.style.setProperty('--anm-image-size', `${imageSize}px`); // Initialize images as hidden imageRefs.current.forEach((img) => { if (img) { gsap.set(img, { opacity: 0, scale: 0, force3D: true }); } }); // Initialize container as hidden gsap.set(imagesContainerRef.current, { opacity: 0, scale: 0, force3D: true }); // Create quickTo functions for smooth cursor following xToRef.current = gsap.quickTo(imagesContainerRef.current, 'x', { duration: followSpeed, ease: 'power3.out', }); yToRef.current = gsap.quickTo(imagesContainerRef.current, 'y', { duration: followSpeed, ease: 'power3.out', }); // Velocity tracking loop const track = (timestamp) => { if (!lastTimeRef.current) lastTimeRef.current = timestamp; const deltaTime = timestamp - lastTimeRef.current; lastTimeRef.current = timestamp; const dx = posRef.current.x - prevPosRef.current.x; if (deltaTime > 0) { velocityRef.current.x = velocityRef.current.x * 0.7 + dx * 0.3; } prevPosRef.current.x = posRef.current.x; prevPosRef.current.y = posRef.current.y; // Calculate target rotation based on horizontal velocity const velocityInfluence = velocityRef.current.x * 0.5; targetRotationRef.current = Math.max(-maxRotation, Math.min(maxRotation, velocityInfluence)); // Interpolate rotation if (isHoveringRef.current) { rotationRef.current += (targetRotationRef.current - rotationRef.current) * 0.2; } else { rotationRef.current *= 0.92; } // Apply rotation if (imagesContainerRef.current) { gsap.set(imagesContainerRef.current, { rotation: rotationRef.current }); } rafIdRef.current = requestAnimationFrame(track); }; rafIdRef.current = requestAnimationFrame(track); // Cleanup return () => { if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current); rafIdRef.current = null; } if (imagesContainerRef.current) { gsap.killTweensOf(imagesContainerRef.current); } imageRefs.current.forEach((img) => { if (img) gsap.killTweensOf(img); }); }; }, { scope: containerRef, dependencies: [imageSize, followSpeed, maxRotation] }); // Check for touch device const [isTouchDevice, setIsTouchDevice] = useState(false); useEffect(() => { setIsTouchDevice( 'ontouchstart' in window || navigator.maxTouchPoints > 0 || window.matchMedia('(hover: none)').matches ); }, []); return (

(itemRefs.current[index] = el)} className="image_follow_list_item" data-anm-image-follow-list-item > {index === 0 &&
}
{item.text}

{!isTouchDevice && (

{items.map((item, index) => ( (imageRefs.current[index] = el)} className="image_follow_list_image" data-anm-image-follow-list-image data-anm-item-index={index} src={item.imageSrc} alt={item.imageAlt || item.text} /> ))}

)}

); }