Why is `<marquee>` deprecated and what is the best alternative?

html

responsive-design

css-animations

javascript

byAnton Shumikhin·Oct 25, 2024

Get rid of the dinosaur <marquee> element. Use CSS animations and keyframes for smooth scrolling effects in the 21st century:

// Chuck Norris approves this animation
@keyframes scroll-text {
  to { transform: translateX(-100%); }
}

// "Hide yo kids, hide yo wife" from overflowing 
.marquee {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  animation: scroll-text 10s linear infinite;
}

<!-- Watch me whip, watch me scroll scroll -->
<div class="marquee">Let's scroll this!</div>

Copy, paste, and you're good to go with a modern marquee replacement.

The why behind deprecation

The <marquee> tag, once glitzy for creating moving text, is deprecated because it was too unruly and non-standard. HTML is the framework for content, while CSS is the designer couturier. The <marquee> tag stepped on CSS's toes and has since faced the music.

- **Deprecated reasons**:
  - Unruly behavior
  - Accessibility challengers
  - Blurs the lines of content (HTML) and style (CSS)

Modern substitutes like CSS animations and JavaScript make the scroll fun again, while being well-behaved.

Moving forward with CSS and JavaScript

CSS for modern scroll effects

Joyride with CSS animations for delicate, appealing scrolling effects:

/* Marquee, but make it fashion */
@keyframes marquee-ltr {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Marquee's cool cousin from the South */
@keyframes marquee-ttb {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

Modulate animation speed and alter timing functions to customize scroll effects to taste.

JavaScript for interactive control

When your scroll demands interactive flair or dynamic content, JavaScript steps in to the limelight:

// "I like to move it, move it!"
document.querySelector('.marquee').addEventListener('mouseenter', function(e) {
  e.target.style.animationPlayState = 'paused';
});

document.querySelector('.marquee').addEventListener('mouseleave', function(e) {
  e.target.style.animationPlayState = 'running';
});

JavaScript scripts take your static scrolling animations to the league of interactivity and dynamism.

Crafting tailored marquees

Decluttered layout with CSS

Structure your HTML to blend with the animation. Use overflow: hidden to veil excess and white-space: nowrap to keep content in line:

<div class="marquee-container">
  <div class="marquee-content">Modern scrolling text, anyone?</div>
</div>

Aesthetic fluidity with CSS styles

Incorporate efficient CSS properties that provide smoother animations:

.marquee-container {
  display: inline-block;
  overflow: hidden;
}
.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-ltr 10s linear infinite;
}