Marquee GSAP

marquee.js

class Marquee {
    constructor(selector, options = {}) {
        // Validação do seletor
        if (!selector) {
            throw new Error('Marquee: selector is required');
        }

        // Configuração padrão expandida
        this.config = {
            speed: 20,
            cloneCount: 2,
            pauseOnHover: true,
            direction: 'left',
            autoStart: true,
            selector: '.marquee',
            ...options
        };

        // Encontra o elemento wrapper
        this.marqueeWrap = typeof selector === 'string' 
            ? document.querySelector(selector)
            : selector;

        if (!this.marqueeWrap) {
            throw new Error(`Marquee: Element "${selector}" not found`);
        }

        this.marquee = this.marqueeWrap.querySelector(this.config.selector);
        if (!this.marquee) {
            throw new Error(`Marquee: Child element "${this.config.selector}" not found`);
        }

        this.elements = [];
        this.animations = [];
        this.boundHandleHover = this.handleHover.bind(this);
        
        if (this.config.autoStart) {
            this.init();
        }
    }

    // ... existing init() method ...

    handleHover(event) {
        const timeScale = event.type === 'mouseenter' ? 0 : 1;
        this.animations.forEach(tween => {
            gsap.to(tween, {
                timeScale,
                duration: 0.5
            });
        });
    }

    setupHoverEvents() {
        this.marqueeWrap.addEventListener('mouseenter', this.boundHandleHover);
        this.marqueeWrap.addEventListener('mouseleave', this.boundHandleHover);
    }

    // Novos métodos públicos
    pause() {
        this.animations.forEach(tween => tween.pause());
    }

    resume() {
        this.animations.forEach(tween => tween.resume());
    }

    setSpeed(speed) {
        this.config.speed = speed;
        this.animations.forEach(tween => {
            tween.duration(speed);
        });
    }

    setDirection(direction) {
        if (direction !== 'left' && direction !== 'right') {
            throw new Error('Marquee: direction must be either "left" or "right"');
        }
        this.config.direction = direction;
        this.destroy();
        this.init();
    }

    destroy() {
        // Cleanup animations
        this.animations.forEach(tween => tween.kill());
        this.animations = [];
        
        // Remove clones
        this.elements.forEach((element, i) => {
            if (i > 0) element.remove();
        });
        
        // Remove event listeners
        if (this.config.pauseOnHover) {
            this.marqueeWrap.removeEventListener('mouseenter', this.boundHandleHover);
            this.marqueeWrap.removeEventListener('mouseleave', this.boundHandleHover);
        }
    }
}

// Exemplo de uso
export default Marquee;











import Marquee from './marquee';

// Criando uma única instância
const marquee1 = new Marquee('.marquee-wrap-1', {
    speed: 20,
    direction: 'left'
});

// Criando múltiplas instâncias
const marquees = document.querySelectorAll('.marquee-wrap').forEach(wrapper => {
    new Marquee(wrapper, {
        speed: 30,
        direction: 'right'
    });
});

// Controlando a marquee
marquee1.pause();
marquee1.resume();
marquee1.setSpeed(40);
marquee1.setDirection('right');