Marquee

Features

Setup

<!-- GSAP Core -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
 
<!-- Divs Marquee Library -->
<script src="https://cdn.jsdelivr.net/gh/idreezus/divs@v1.0.0/dist/marquee/v1.0.0/marquee.min.js"></script>

<div data-marquee="true" class="my-marquee">
  <div data-marquee-item="true">Item 1</div>
  <div data-marquee-item="true">Item 2</div>
  <div data-marquee-item="true">Item 3</div>
</div>

/* Horizontal marquee */
.my-marquee {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  gap: 2rem;
}
 
/* Vertical marquee */
.my-vertical-marquee {
  display: flex;
  flex-direction: column;
  height: 24rem;
  overflow: hidden;
  gap: 1rem;
}

How It Works

Everything about this component is based on the flexbox. This library was designed with Webflow's visual development in mind – I want to see how my marquee looks without surpises. You control the visual behavior by:

• Control orientation simply by setting flex-directionCopy
• Add space between items by using gapCopy
• Size individual items using your typical CSS

The library handles the animation complexity behind the scenes, and GSAP powers the animation timelines and allows for fancy things like speed ramped hover effects.

But here's my favorite part: you can start off in one direction and automatically "flip" at any breakpoint. The library detects the switch and rebuilds the animation to match your new layout.

This came about because vertical infinite marquees are kinda obnoxious on mobile screens. With previous marquee libraries, if you wanted to swap directions at an arbitrary breakpoint, you'd have to duplicate your marquee twice and use display: hiddenCopy (meaning you really had two individual marquees that are shown/hidden at different times).

But that's hacky and pollutes the DOM. It's the type of thing that would've made Steve Jobs mad if he was a web developer (or alive).

Responsive Directions

Direction is controlled entirely through CSS flex-directionCopy. Here's an example of a responsive layout that goes from vertical → horizontal on smaller screens.

/* Vertical on desktop */
.my-marquee {
  display: flex;
  flex-direction: column;
  height: 36rem;
  overflow: hidden;
}
 
/* Switch to horizontal on mobile */
@media (min-width: 768px) {
  .my-marquee {
    flex-direction: row;
    height: auto;
  }
}

The library detects uses ResizeObserverCopy to detect direction changes during window resize events and rebuilds the animation. Previous playback position is preserved proportionally, so users don't experience jarring jumps when resizing their browser or rotating their device.

Reversing Direction

To animate the marquee in the opposite direction, add [data-marquee="reverse"]Copy to the container element:

<div class="my-marquee" data-marquee="true" data-marquee-reverse="true">
  <!-- your items here -->
</div>

Hover Effects

Add interactive hover effects with simple attributes on your container element. All hover effects use smooth easing curves and customizable timing.

Slow Effect

To reduce speed to a slower sustained pace during hover, add [data-marquee-effect="slow"]Copy to the container element:

<div data-marquee="true" data-marquee-hover-effect="slow">
  <!-- your items here -->
</div>

Pause Effect

To ramp speed down to a complete stop when hovering, add [data-marquee-effect="pause"]Copy to the container element:

<div data-marquee="true" data-marquee-hover-effect="pause">
  <!-- your items here -->
</div>

Trigger Area

By default, hovering anywhere on the container triggers the effect. If you want the effect to only trigger when a specific item is hovered instead (maybe because you have huge gaps between items so the container has lots of "empty" space):

<div
  data-marquee="true"
  data-marquee-hover-effect="pause"
  data-marquee-hover-trigger="items"
>
  <!-- your items here -->
</div>

Spacing & CSS Gaps

The library measures spacing between items to ensure seamless loops. For reliable results, use the CSS gapCopy property on your container:

.my-marquee {
  display: flex;
  gap: 2rem; /* your spacing between items */
}

The library attempts to measure margins and padding, but gapCopy provides the most consistent and predictable spacing. The spacing calculation uses the median gap between items, which feeds into clone positioning and timeline duration to prevent visible seams at the loop point.

Auto-Cloning

To create infinite loops, items are cloned to create continuous loops. This is done automatically. The library smartly calculates the minimum amount of clones needed based on:

• Container dimensions (width for horizontal, height for vertical)
• Total content size
• Spacing between items

Cloned elements are marked with [aria-hidden-"true"]Copy so screen readers announce the original content once without any of the clones.

Clone count is capped at 10 sets maximum for performance.

Disabling Auto-Clone

If you want to manage cloning manually:

<div data-marquee="true" data-marquee-auto-clone="false" class="my-marquee">
  <!-- manually duplicate your items here -->
</div>

Custom Clone Count

Override the automatic calculation:

<div data-marquee="true" data-marquee-clones="3" class="my-marquee">
  <!-- your items here -->
</div>

Customization

Core Attributes

All configuration happens through data-marquee-*Copy attributes on the container element:

Hover Effects

Fine-tune hover interactions with these attributes:

Performance

IntersectionObserver

By default, marquees pause when scrolled out of the viewport to improve performance. Control this behavior with:

Cloning Performance

Reduce clone count if you have many large items or complex layouts:

JavaScript API

Control marquees programmatically through the global window.MarqueeCopy object. The library auto-initializes on page load, but you can also manage instances manually.

Initialization

// Initialize all marquees (called on DOMContentLoaded)
window.Marquee.init();
 
// Initialize with custom selector
window.Marquee.init(".custom-marquee-class");

Getting Instances

// Get single instance
const marquee = window.Marquee.get(element);
 
// Get all instances (returns array)
const allMarquees = window.Marquee.getAll();
 
// Check if element has a marquee
const hasMarquee = window.Marquee.has(element);

Control Methods

All batch methods are chainable:

// Instance control
const marquee = window.Marquee.get(element);
marquee.play();
marquee.pause();
marquee.destroy();
 
// Batch control
window.Marquee.pauseAll();
window.Marquee.playAll(".my-marquees");
window.Marquee.destroyAll(".old-marquees");
 
// Manual direction refresh (useful after dynamic CSS class changes)
window.Marquee.refresh(element);
window.Marquee.refreshAll();
 
// Chaining
window.Marquee.pauseAll(".slow").playAll(".fast").refreshAll();

Dynamic Content Updates

When adding or removing items after initialization, destroy and reinitialize:

const container = document.querySelector("[data-marquee]");
const instance = window.Marquee.get(container);
 
// Destroy existing instance
instance.destroy();
 
// Update content
container.innerHTML = "..."; // Add new items with data-marquee-item="true"
 
// Reinitialize
window.Marquee.init();

Accessibility

The library includes built-in accessibility features to ensure marquees work well for all users. Cloned items are marked with aria-hiddenCopy = "true"Copy so screen readers announce the original content once, preventing repetitive announcements. The library respects the prefers-reduced-motionCopy media query by reducing animation speed to 10% for users who have indicated a preference for reduced motion. All semantic HTML structure is preserved, ensuring assistive technologies can navigate and understand the content regardless of animation state.

FAQ