Animate Multiple Marquee Text Lines Separately with JavaScript: A Complete Guide (2026)

Animating text on a webpage can add dynamism and capture attention. While the old <marquee> tag was popular for this effect, it is now deprecated. This tutorial shows you how to animate multiple lines of marquee text independently using JavaScript, providing a modern solution to this classic effect.

Key Takeaways

• Learn to animate text without the deprecated <marquee> tag.
• Understand how to manage multiple animations simultaneously using JavaScript.
• Explore techniques to customize text speed and direction.
• Implement a reusable function to animate any text element.

In this tutorial, we will create a JavaScript function that animates multiple lines of text separately on a webpage. This approach gives you more control over the appearance and behavior of the animation, allowing for customized speed, direction, and style. By the end of this guide, you'll be equipped to replace <marquee> in your projects with a robust JavaScript solution.

Prerequisites

• Basic understanding of HTML and CSS
• Familiarity with JavaScript fundamentals
• A code editor such as Visual Studio Code
• A modern web browser for testing

Step 1: Set Up Your HTML Structure

Begin by setting up a simple HTML structure to hold your marquee text. Each line of text will be placed within its own container.

<div class="marquee_container">
  <div class="marquee_text">This is the first marquee line.</div>
  <div class="marquee_text">This is the second marquee line.</div>
  <div class="marquee_text">This is the third marquee line.</div>
</div>

This structure allows each text line to be animated separately, giving you the flexibility to apply different animations to each line.

Step 2: Style the Marquee Elements with CSS

Next, apply some basic CSS to ensure the text is styled and positioned correctly. We'll use CSS to set the width and overflow properties, which are essential for creating the scrolling effect.

.marquee_container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  border: 1px solid #ccc;
}
.marquee_text {
  display: inline-block;
  padding: 10px;
  font-size: 24px;
  position: relative;
  animation: marquee 10s linear infinite;
}

This CSS sets up a scrolling effect by using the animation property. However, we will override this with JavaScript to control each line individually.

Step 3: Create the Marquee Animation Function in JavaScript

Now, let's write a JavaScript function to animate the text lines. This function will allow each line to scroll independently.

function animateMarquee(textElement, speed) {
  let pos = 0;
  const elementWidth = textElement.offsetWidth;
  const containerWidth = textElement.parentElement.offsetWidth;

  function step() {
    pos -= speed;
    if (pos < -elementWidth) {
      pos = containerWidth;
    }
    textElement.style.transform = `translateX(${pos}px)`;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

This function uses transform and requestAnimationFrame to animate the text smoothly. The position is reset once the text has fully scrolled out of view, creating a continuous loop.

Step 4: Apply the Animation to Multiple Text Elements

With the function ready, apply it to each marquee text element. You can customize the speed for each line, allowing for varied animations.

document.querySelectorAll('.marquee_text').forEach((textElement, index) => {
  animateMarquee(textElement, 2 + index); // Different speed for each line
});

By varying the speed parameter, each line will scroll at a different rate, adding visual interest and complexity to your animation.

Common Errors/Troubleshooting

• Text Overlaps: Ensure your container's width is correctly set to prevent text overlap.
• Animation Jitters: Check that all CSS and JavaScript properties are correctly applied, and use requestAnimationFrame for smooth animations.
• Speed Issues: Adjust the speed parameter to ensure the text moves at a desired pace.

Frequently Asked Questions

Can I change the direction of the marquee?

Yes, by adjusting the pos variable incrementally, you can reverse the direction.

Is this method compatible with all browsers?

This method works in all modern browsers that support CSS animations and JavaScript.

How do I pause the animation on hover?

Add event listeners to stop the animation when the mouse is over the text and restart it on mouse out.

Frequently Asked Questions

Can I change the direction of the marquee?

Yes, by adjusting the pos variable incrementally, you can reverse the direction.

Is this method compatible with all browsers?

This method works in all modern browsers that support CSS animations and JavaScript.

How do I pause the animation on hover?

Add event listeners to stop the animation when the mouse is over the text and restart it on mouse out.