Softedge Docs
v1.13.0 Index

Marquee

Basic Structure

A seamless looping horizontal scroll. Duplicate every item once (with aria-hidden="true") so the CSS animation can loop without a visible jump.

.marquee / .marquee-track / .marquee-item
Item 1
Item 2
Item 3
Item 4
<div class="marquee">
  <div class="marquee-track">
    <div class="marquee-item">…</div>  <!-- ×N originals -->
    <div class="marquee-item" aria-hidden="true">…</div>  <!-- ×N exact duplicates -->
  </div>
</div>

Modifiers

Reverse the direction or pause the animation on hover/focus.

.marquee-reverse
Item 1
Item 2
Item 3
Item 4
<div class="marquee marquee-reverse">…</div>
.marquee-pause-hover
Hover to pause
Item 2
Item 3
Item 4
<div class="marquee marquee-pause-hover">…</div>

CSS variables

Override on the .marquee element to tune speed and spacing.

--marquee-duration / --marquee-gap
Fast & wide gap
Item 2
Item 3
Item 4
// defaults
--marquee-duration: 40s;
--marquee-gap: 1rem;

// override per instance
<div class="marquee" style="--marquee-duration: 15s; --marquee-gap: 2rem;">…</div>

Combined with .clip-linear

Fade the left and right edges so items appear to emerge from and disappear into the background.

.marquee.clip-linear
Item 1
Item 2
Item 3
Item 4
<div class="marquee clip-linear">…</div>

Accessibility

The animation is disabled automatically when the user has prefers-reduced-motion: reduce. Duplicates are marked aria-hidden="true" so screen readers only announce each item once.

On this page