🎄 Smooth Infinite Scrolling Announcement Bar (With Pause on Hover)

Technical
1

If you’re adding a holiday sale announcement like:

HOLIDAY SALE: SAVE UP TO 25% BY USING CODE HLD2026 AT CHECKOUT

You may notice that on mobile it breaks into two lines.
Instead of forcing it to stay static, a much better solution is to create a smooth infinite right-to-left scrolling effect — without any visible jump.

2026-02-18_05-35-09

Here’s the smoother, seamless version :backhand_index_pointing_down:

:white_check_mark: HTML

<div class="announcement-bar">
  <div class="announcement-track">
    <span>HOLIDAY SALE: SAVE UP TO 25% BY USING CODE HLD2026 AT CHECKOUT</span>
    <span>HOLIDAY SALE: SAVE UP TO 25% BY USING CODE HLD2026 AT CHECKOUT</span>
  </div>
</div>

:white_check_mark: CSS

.announcement-bar {
  overflow: hidden;
  background: #000; /* Change to your brand color */
  color: #fff;
  padding: 8px 0;
}

.announcement-track {
  display: flex;
  width: max-content;
  animation: marquee 15s linear infinite;
}

.announcement-track span {
  white-space: nowrap;
  padding-right: 50px;
  font-weight: 600;
}

.announcement-bar:hover .announcement-track {
  animation-play-state: paused;
}

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

:fire: Why This Version Is Better

  • :white_check_mark: Prevents text from wrapping on mobile
  • :white_check_mark: Infinite smooth scrolling
  • :white_check_mark: No visible reset/jump
  • :white_check_mark: More premium look
  • :white_check_mark: Works perfectly for Shopify, Funnelish, or custom HTML
2 Likes