'use client'; import { useRef, useCallback, useMemo } from 'react'; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; import { Draggable } from 'gsap/Draggable'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; import './marquee.css'; if (typeof window !== 'undefined') { gsap.registerPlugin(useGSAP, Draggable, InertiaPlugin); } /** * horizontalLoop helper - creates infinite scrolling animation * Based on official GSAP helper pattern */ function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let tl = gsap.timeline({ repeat: config.repeat, paused: config.paused, defaults: { ease: 'none' }, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100), }); const length = items.length; const startX = items[0].offsetLeft; const times = []; const widths = []; const xPercents = []; let curIndex = 0; const pixelsPerSecond = (config.speed || 1) * 100; const snap = config.snap === false ? (v) => v : gsap.utils.snap(config.snap || 1); const populateWidths = () => { items.forEach((el, i) => { widths[i] = parseFloat(gsap.getProperty(el, 'width', 'px')); xPercents[i] = snap( (parseFloat(gsap.getProperty(el, 'x', 'px')) / widths[i]) * 100 + gsap.getProperty(el, 'xPercent') ); }); }; const getTotalWidth = () => items[length - 1].offsetLeft + (xPercents[length - 1] / 100) * widths[length - 1] - startX + items[length - 1].offsetWidth * gsap.getProperty(items[length - 1], 'scaleX') + (parseFloat(config.paddingRight) || 0); let totalWidth, curX, distanceToStart, distanceToLoop, item; populateWidths(); gsap.set(items, { xPercent: (i) => xPercents[i] }); gsap.set(items, { x: 0 }); totalWidth = getTotalWidth(); for (let i = 0; i < length; i++) { item = items[i]; curX = (xPercents[i] / 100) * widths[i]; distanceToStart = item.offsetLeft + curX - startX; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, 'scaleX'); tl.to( item, { xPercent: snap(((curX - distanceToLoop) / widths[i]) * 100), duration: distanceToLoop / pixelsPerSecond, }, 0 ) .fromTo( item, { xPercent: snap(((curX - distanceToLoop + totalWidth) / widths[i]) * 100) }, { xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false, }, distanceToLoop / pixelsPerSecond ) .add('label' + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } function toIndex(index, vars) { vars = vars || {}; if (Math.abs(index - curIndex) > length / 2) { index += index > curIndex ? -length : length; } const newIndex = gsap.utils.wrap(0, length, index); let time = times[newIndex]; if (time > tl.time() !== index > curIndex) { vars.modifiers = { time: gsap.utils.wrap(0, tl.duration()) }; time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return tl.tweenTo(time, vars); } tl.next = (vars) => toIndex(curIndex + 1, vars); tl.previous = (vars) => toIndex(curIndex - 1, vars); tl.current = () => curIndex; tl.toIndex = (index, vars) => toIndex(index, vars); tl.updateIndex = () => (curIndex = Math.round(tl.progress() * items.length)); tl.times = times; tl.progress(1, true).progress(0, true); if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } // Draggable support if (config.draggable && typeof Draggable !== 'undefined') { const proxy = document.createElement('div'); const wrap = gsap.utils.wrap(0, 1); let ratio, startProgress, draggable, dragSnap, roundFactor; const align = () => tl.progress(wrap(startProgress + (draggable.startX - draggable.x) * ratio)); const syncIndex = () => tl.updateIndex(); draggable = Draggable.create(proxy, { trigger: config.trigger || items[0].parentNode, type: 'x', onPress() { tl.pause(); startProgress = tl.progress(); tl.progress(0); populateWidths(); totalWidth = getTotalWidth(); ratio = 1 / totalWidth; dragSnap = totalWidth / items.length; roundFactor = Math.pow(10, ((dragSnap + '').split('.')[1] || '').length); tl.progress(startProgress); }, onDrag: align, onThrowUpdate: align, inertia: true, snap: (value) => { const n = Math.round(parseFloat(value) / dragSnap) * dragSnap * roundFactor; return (n - (n % 1)) / roundFactor; }, onRelease: syncIndex, onThrowComplete: () => { const draggedLeft = draggable.x < 0; gsap.set(proxy, { x: 0 }); syncIndex(); tl.timeScale(1); if (draggedLeft) { tl.play(); } else { tl.reverse(); } }, })[0]; tl.draggable = draggable; } return tl; } /** * Get the opposite direction for alternating tracks. */ function getOppositeDirection(direction) { const opposites = { left: 'right', right: 'left', up: 'down', down: 'up', }; return opposites[direction] || direction; } /** * Marquee Component * Infinite scrolling marquee with draggable interaction and momentum. * * @param {string} [className=''] - Additional CSS classes * @param {Array} items - Array of items { type: 'text'|'image', content, src, alt } * @param {string} [type='horizontal'] - Direction type: 'horizontal' or 'vertical' * @param {number} [speed=1] - Animation speed (higher = faster) * @param {string} [direction='left'] - Direction: 'left', 'right', 'up', 'down' * @param {boolean} [draggable=true] - Enable drag interaction * @param {number} [dragSensitivity=1] - Drag sensitivity multiplier * @param {boolean} [pauseOnHover=false] - Pause animation on hover * @param {boolean} [paused=false] - Start in paused state * @param {string|number|boolean} [clone=false] - Clone items: 'auto', number, or false * @param {number} [tracks=1] - Number of tracks (alternating directions) */ export default function Marquee({ className = '', items = [], type = 'horizontal', speed = 1, direction = 'left', draggable = true, dragSensitivity = 1, pauseOnHover = false, paused = false, clone = false, tracks = 1, }) { const containerRef = useRef(null); const loopsRef = useRef([]); const draggablesRef = useRef([]); const isVertical = type === 'vertical'; const trackCount = Math.max(1, parseInt(tracks, 10) || 1); // Generate array of track indices for rendering const trackIndices = useMemo(() => { return Array.from({ length: trackCount }, (_, i) => i); }, [trackCount]); // Calculate cloned items array const displayItems = useMemo(() => { if (!clone || !items.length) return items; let cloneCount; if (clone === 'auto') { // For auto, default to 2 clones (ensures smooth looping) // Actual auto-calculation happens at runtime in vanilla JS cloneCount = 2; } else { cloneCount = parseInt(clone, 10); } if (isNaN(cloneCount) || cloneCount < 1) return items; // Create array with original + cloned items const result = [...items]; for (let i = 0; i < cloneCount; i++) { items.forEach((item) => { result.push({ ...item, _isClone: true }); }); } return result; }, [items, clone]); // Initialize marquee animation for all tracks useGSAP( () => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; if (!containerRef.current || !displayItems.length) return; const container = containerRef.current; const trackElements = container.querySelectorAll('.marquee_track'); if (!trackElements.length) return; const loops = []; const draggables = []; trackElements.forEach((track, trackIndex) => { const content = track.querySelector('[data-anm-content]'); if (!content) return; const marqueeItems = gsap.utils.toArray(content.children); if (!marqueeItems.length) return; // Determine direction: first track (0), third (2), fifth (4)... use base direction // Second track (1), fourth (3), sixth (5)... use opposite direction const isAlternateTrack = trackIndex % 2 !== 0; const baseIsReversed = direction === 'right' || direction === 'down'; // For alternate tracks, flip the reversed state const shouldReverse = isAlternateTrack ? !baseIsReversed : baseIsReversed; // Create loop without reversed option - we'll handle direction manually const loop = horizontalLoop(marqueeItems, { paused: true, draggable: draggable, repeat: -1, speed: speed, reversed: false, // Always create forward, we'll reverse manually if needed trigger: track, }); // Start playing if not paused if (!paused) { if (shouldReverse) { // For reversed direction: set to end and play backward loop.progress(1); loop.reverse(); } else { loop.play(); } } loops.push(loop); if (loop.draggable) { draggables.push(loop.draggable); } }); loopsRef.current = loops; draggablesRef.current = draggables; // Cleanup return () => { loopsRef.current.forEach((loop) => loop.kill()); loopsRef.current = []; draggablesRef.current.forEach((d) => d.kill()); draggablesRef.current = []; }; }, { scope: containerRef, dependencies: [displayItems, type, speed, direction, draggable, dragSensitivity, paused, trackCount], } ); // Pause on hover handlers (affects all tracks) const handleMouseEnter = useCallback(() => { if (pauseOnHover && loopsRef.current.length) { loopsRef.current.forEach((loop) => loop.pause()); } }, [pauseOnHover]); const handleMouseLeave = useCallback(() => { if (pauseOnHover && loopsRef.current.length) { loopsRef.current.forEach((loop) => loop.play()); } }, [pauseOnHover]); return (

1 ? 'is-dual' : ''} ${className}`.trim()} data-anm-marquee data-anm-type={type} data-anm-speed={speed} data-anm-direction={direction} data-anm-draggable={draggable} data-anm-drag-sensitivity={dragSensitivity} data-anm-pause-on-hover={pauseOnHover} data-anm-clone={clone || undefined} data-anm-tracks={trackCount > 1 ? trackCount : undefined} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {trackIndices.map((trackIndex) => (

0 ? 'true' : undefined} >

{displayItems.map((item, itemIndex) => item.type === 'image' ? ( {item.alt

) : ( {item.content} ) )}

))}

); }