Smooth Horizontal Scrolling Text Animation with Play/Pause Toggle

Introduction

In modern web design, animations can enhance user experience and engagement. One such animation effect is a horizontally scrolling text, which can be particularly useful for displaying news tickers, announcements, or promotional messages. In this article, we’ll explore how to create a smooth horizontal scrolling text animation with a play/pause toggle button using HTML, CSS, and JavaScript.

HTML

HTML / XML

<div class="container">
  <div class="horizontal-scrolling-items">
    <div class="horizontal-scrolling-items__item">
      Here is some horizontally scrolling text used for a tutorial. It will loop smoothly.
    </div>
  </div>
  <button id="toggleButton" class="fixed-icon">▶️</button>
</div>

CSS

@keyframes infiniteScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.container {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

.horizontal-scrolling-items {
  display: flex;
  font-size: 40px;
  width: 2600px;
  animation-name: infiniteScroll;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.horizontal-scrolling-items__item {
  white-space: nowrap;
}

.fixed-icon {
  position: absolute;
  right: 10px; /* Adjust as needed */
  bottom: 10px; /* Adjust as needed */
  background: transparent;
  border: none;
  font-size: 24px; /* Adjust as needed */
  cursor: pointer;
}

Script

JavaScript

const button = document.getElementById('toggleButton');
const scrollingItems = document.querySelector('.horizontal-scrolling-items');
let isPlaying = true;

button.addEventListener('click', () => {
  if (isPlaying) {
    scrollingItems.style.animationPlayState = 'paused';
    button.textContent = '▶️'; // Play icon
  } else {
    scrollingItems.style.animationPlayState = 'running';
    button.textContent = '⏸️'; // Pause icon
  }
  isPlaying = !isPlaying;
});

Overview

The goal is to create a horizontal scrolling text that loops continuously. We’ll use CSS animations for the scrolling effect and JavaScript to add interactivity with a toggle button. Here's a breakdown of the implementation.

HTML Structure: Defines the container and the scrolling text.
CSS Styling and Animation: Handles the visual appearance and scrolling effect.
JavaScript Interaction: Manages the play and pause functionality of the animation.

HTML Structure

The HTML structure consists of a container with horizontally scrolling text and a button to control the animation.

.container: The main container that holds the scrolling text and the toggle button.
.horizontal-scrolling-items: A flex container for the text items, which will be animated.
.horizontal-scrolling-items__item: The individual item containing the scrolling text.
#toggleButton: A button to control the animation.

CSS Styling and Animation

The CSS rules manage the appearance of the elements and define the scrolling animation.

@keyframes infiniteScroll: Defines the animation named infiniteScroll, moving the text from its initial position to -50% horizontally.
.container: Ensures that the container’s width spans the entire viewport and hides any overflow.
.horizontal-scrolling-items: Applies the animation to this flex container, making the text scroll horizontally.
.horizontal-scrolling-items__item: Ensures the text does not wrap and stays in a single line.
.fixed-icon: Styles the button, positioning it at the bottom-right of the container.

JavaScript Interaction

The JavaScript code toggles the animation between play and pause states when the button is clicked.

button: Gets a reference to the toggle button.
scrollingItems: Gets a reference to the scrolling text container.
isPlaying: A boolean variable to track the animation state.
addEventListener: Adds a click event listener to the button that toggles the animationPlayState property between paused and running and updates the button text to indicate the current state.

Conclusion

With this implementation, you’ve created a horizontally scrolling text animation that loops smoothly and can be toggled on and off with a simple button click. This approach not only adds a dynamic element to your web page but also provides users with control over the animation, enhancing interactivity.