Example 1: Text Marquee (Pause on Hover)

🍔 Burger

🍕 Pizza

🍣 Sushi

🌯 Burrito

🍜 Ramen

Example 2: Pause on Click + Variable Speed

News 1

Breaking 2

Update 3

Analysis 4

Insight 5

Example 3: Image Marquee

Example 4: Paragraph Marquee (long text blocks)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue Rupash.

Documentation

Features

Lightweight marquee using GSAP ticker for smooth 60fps animation.
Supports multiple marquees on the same page.
Accurate spacing using real DOM geometry (handles margins/paddings).
Options for direction, pause modes, variable speed, responsive rebuild, looping, and callbacks.

Options

Pass an options object to gsapMarquee(selector, options) or use the jQuery plugin API.

Option	Type	Default	Description
speed	number	100	Pixels per second.
direction	string	'ltr'	'ltr' or 'rtl'. Controls movement direction.
pauseOnHover	boolean	true	Pause when mouse enters the marquee.
pauseOnClick	boolean	false	Toggle pause when marquee is clicked.
variableSpeed	boolean	false	On hover, slow down instead of pausing. (pauseOnHover must be true to variableSpeed work.)
startPaused	boolean	false	Start the marquee paused.
responsive	boolean	true	Rebuild clones and widths on window resize.
loop	boolean	true	Continuous looping (set false to run once).
containerSelector	string	'.customMarquee'	Selector for the inner wrapper containing items.
itemsSelector	string	'.marquee-item'	Selector for item nodes within the container.
onComplete	function	null	Callback when a non-looping marquee completes a cycle. Receives cycle count.

API / Methods

Each initialized marquee instance exposes the following methods:

Method	Args	Description
`pause()`	—	Pause animation.
`resume()`	—	Resume animation.
`isPaused()`	—	Returns `true` if paused.
`rebuild()`	—	Recalculate widths and clones (call after DOM/content changes).
`reverse()`	—	Toggle direction between `ltr` and `rtl`.
`destroy()`	—	Cleanup event listeners and stop ticker for that instance.

1. Initialize a Marquee with jQuery

$('#yourMarquee').gsapMarquee({
	speed: 100,                   // pixels per second
	direction: "ltr",           // "ltr" or "rtl"
	pauseOnHover: true,          // pause on hover
	pauseOnClick: false,         // pause/resume on click
	variableSpeed: false,        // on hover, slow instead of pause
	startPaused: false,          // start paused
	responsive: true,            // auto recalc on resize
	loop: true,                  // infinite loop
	containerSelector: '.marqueeInner',
	itemsSelector: '.marquee-item',
	onComplete: function(cycle){   // callback each loop
		console.log("Cycle:", cycle);
	}
});

1. Initialize a Marquee with Vanilla

let instance = gsapMarquee('#m1', {
    speed: 140,
    direction: 'ltr',
    pauseOnHover: true,
    pauseOnClick: false,
    variableSpeed: false,
    startPaused: false,
    responsive: true,
    loop: true,
    containerSelector: '.marqueeInner',
    itemsSelector: '.marquee-item',
    onComplete: function(cycle) { console.log('cycle', cycle); }
});

3. Instance API

let instance = $('#yourMarquee').gsapMarquee();

// Pause / Resume
instance.pause();
instance.resume();

// Reverse direction at runtime
instance.reverse();

// Rebuild (recalculate widths, clones)
instance.rebuild();

// Destroy (cleanup)
instance.destroy();

4. Image Marquee (imagesLoaded + setTimeout)

Important: Always ensure images are fully loaded before initializing image marquees — use imagesLoaded and a short setTimeout to guarantee correct widths.

imagesLoaded('#imageMarquee', function() {
    setTimeout(function() {
        $('#imageMarquee').gsapMarquee({
            speed: 100,
            containerSelector: '.marqueeInner',
            itemsSelector: '.marquee-img-item'
        });
    }, 0);
});

Notes

Use will-change: transform on .marqueeInner for smoother animation and better compositing performance.
Images and web fonts must be loaded before initializing image/text marquees — use imagesLoaded or font loading APIs, then call a short setTimeout and initialize to ensure correct widths.
Hover pause is not reliable on touch devices. Provide a tap/click toggle or an explicit control for mobile users.
Avoid placing interactive controls (buttons/links/forms) inside continuously moving marquees. If you must, ensure the marquee pauses on focus so keyboard users can interact safely.
Keep the number of unique items moderate: clones multiply DOM nodes and can impact performance on low-end devices.
If you change content programmatically (images, text, or font loading), call the instance rebuild() so widths and clones are recalculated.

Practical snippets

Copy and paste these small helpers into your project where appropriate.

Respect prefers-reduced-motion

if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
	// honor reduced motion: start paused or reduce speed
	opts = opts || {};
	opts.startPaused = true; // or opts.speed = 0
}
let instance = gsapMarquee('#m', opts);

Pause on focus (keyboard accessibility)

// Pause when any item receives keyboard focus
instance.items.forEach(function(el){
	el.addEventListener('focus', function(){ instance.pause(); }, true);
	el.addEventListener('blur',  function(){ instance.resume(); }, true);
});

Rebuild after dynamic content changes


// Instance must be in scope
let instance = gsapMarquee('#m1', {speed: 140});

// After images or content change, give layout a moment then rebuild
setTimeout(function(){
	instance.rebuild();
}, 50);

GSAP Marquee Demo