Marquee turns a list into an endless horizontal loop: the items scroll, and when the last one leaves, the first one is already coming back. The animation runs on GSAP, taken from the Manager like every other library in the framework, through the @andresclua/infinite-marquee-gsap package, which builds the loop. The class in src/js/handler/marquee only adds the speed, the direction and the pause on hover.

The markup

A list with the js--marquee hook. Every child of the list is one item of the loop; there must be enough of them to fill the width, or the loop shows a gap.

<!-- The list is the track; every child is one item of the loop -->
<ul class="c--marquee-a js--marquee">
  <li class="c--marquee-a__item">1</li>
  <li class="c--marquee-a__item">2</li>
  <li class="c--marquee-a__item">3</li>
</ul>

The handler

Handler.js reads the three attributes from the list and passes them on. Leave one out and you get its default:

this.config = ({element}) => ({
    element: element,
    Manager: this.Manager,
    speed: element.getAttribute("data-speed") || 1,
    controlsOnHover: element.getAttribute("data-controls-on-hover") || "false",
    reversed: element.getAttribute("data-reversed") || "false",
})
this.init();
this.events();
    }

    get updateTheDOM() {
return {
    marqueeElements: document.querySelectorAll(`.js--marquee`),
};

What the framework does for you

• Lazy loading. A marquee is only built when it gets within 100px of the viewport (Boostify), and GSAP is imported once and cached by the Manager.
• Page transitions. The loop is killed and its listeners removed before swup replaces the content, and rebuilt on the new page.
• Play and pause. The instance exposes play() and pause(), which ease the speed to and from zero. Hover uses them when data-controls-on-hover is on.

The simplest case. Fifteen numbered items, nothing to configure. The items are 20% wide, so five are on screen and the loop never shows a gap.

<!-- The list is the track; every child is one item of the loop -->
<ul class="c--marquee-a js--marquee">
  <li class="c--marquee-a__item">1</li>
  <li class="c--marquee-a__item">2</li>
  <li class="c--marquee-a__item">3</li>
</ul>

The three attributes together. data-speed is a multiplier of the default pace. data-reversed flips the direction. data-controls-on-hover pauses the loop on mouse enter and resumes it on mouse leave, easing in both cases so the stop is never a jolt. Items can be any width: here each name sets its own.

<ul class="c--marquee-b js--marquee" data-speed="12" data-reversed="true" data-controls-on-hover="true">
  <li class="c--marquee-b__item"><h3 class="c--marquee-b__item__title">Andres Clua</h3></li>
  <li class="c--marquee-b__item"><h3 class="c--marquee-b__item__title">Mara Scampini</h3></li>
  …
</ul>

The look of the items is yours: c--marquee-a and c--marquee-b are two examples of styling, not part of the handler.