AcmeTicker: Vanilla JS News Ticker with Typewriter Effects and RTL Support

Authorcodersantosh

Last UpdateSeptember 3, 2026

LicenseMIT

Features

Vertical, horizontal, marquee, and typewriter ticker engines.
Automatic RTL detection for horizontal and marquee movement.
Pause on pointer hover or focus.
Previous, next, and playback controls.
Runtime type changes and full instance cleanup.
Native CustomEvents for playback toggles and completed cycles.
Paused startup when reduced motion is preferred.

Use Cases

Breaking-news headers rotate current headlines inside a compact fixed-height strip.
E-commerce announcement bars cycle shipping notices, promotions, and store updates.
Dashboard headers display changing service notices or system status messages.
Sports and market pages use marquee mode for continuously moving short updates.

How To Use It

Installation

Load the browser build before initializing the ticker:

<script src="https://cdn.jsdelivr.net/npm/acmeticker@2/dist/acmeticker.min.js"></script>

For module-based projects:

npm install acmeticker

import { AcmeTicker } from 'acmeticker';

Basic Usage

Place the ticker items inside a <ul>, then pass that element to the constructor.

<div class="news-ticker-box">
  <ul class="news-feed">
    <li><a href="#">Dashboard update is now available</a></li>
    <li><a href="#">Maintenance starts Friday at 11 PM</a></li>
    <li><a href="#">New API examples were published today</a></li>
  </ul>
</div>
<script>
const ticker = new AcmeTicker(
  document.querySelector('.news-feed'),
  {
    type: 'vertical',
    autoplay: 3500,
    speed: 500,
    direction: 'up'
  }
);
</script>

Vertical, horizontal, and typewriter layouts need a defined viewing area. Set a fixed height and hide overflow on the containing ticker box.

.news-ticker-box {
  height: 42px;
  overflow: hidden;
}
.news-feed {
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-feed li {
  line-height: 42px;
}

Choose A Ticker Engine

Change the type option to select the required motion.

// Vertical rotation.
new AcmeTicker(document.querySelector('#latest-news'), {
  type: 'vertical',
  speed: 600
});
// Horizontal rotation.
new AcmeTicker(document.querySelector('#alerts'), {
  type: 'horizontal',
  direction: 'left',
  speed: 600
});
// Continuous marquee.
new AcmeTicker(document.querySelector('#market-feed'), {
  type: 'marquee',
  direction: 'left',
  speed: 0.05
});
// Character-by-character text.
new AcmeTicker(document.querySelector('#messages'), {
  type: 'typewriter',
  speed: 50,
  autoplay: 2000
});

Add Playback Controls

Vertical, horizontal, and typewriter tickers accept previous, next, and toggle controls. Marquee mode uses the toggle control only.

<div class="ticker-shell">
  <div class="ticker-window">
    <ul class="release-feed">
      <li>Version 4.2 released</li>
      <li>New theme package published</li>
      <li>API reference updated</li>
    </ul>
  </div>
  <div class="ticker-controls">
    <button class="ticker-prev" type="button">Previous</button>
    <button class="ticker-toggle" type="button">Pause</button>
    <button class="ticker-next" type="button">Next</button>
  </div>
</div>

const releaseTicker = new AcmeTicker(
  document.querySelector('.release-feed'),
  {
    type: 'vertical',
    autoplay: 4000,
    speed: 600,
    controls: {
      prev: '.ticker-prev',
      next: '.ticker-next',
      toggle: '.ticker-toggle'
    }
  }
);

Configure RTL Behavior

Horizontal and marquee modes detect RTL context automatically. The left and right direction values follow the current text direction.

<section dir="rtl">
  <div class="ticker-window">
    <ul class="arabic-feed">
      <li>خبر جديد للموقع</li>
      <li>تحديث جديد متاح الآن</li>
    </ul>
  </div>
</section>

new AcmeTicker(document.querySelector('.arabic-feed'), {
  type: 'marquee'
});

Full Configuration Options

type ('vertical' | 'horizontal' | 'marquee' | 'typewriter'): Selects the ticker engine. Default: 'horizontal'.
autoplay (number): Sets the delay between vertical or horizontal transitions and the completed-text hold period for typewriter mode. Default: 2000. Marquee mode ignores this value.
speed (number): Sets transition duration for vertical and horizontal modes, character delay for typewriter mode, or travel speed for marquee mode. Default: 50.
direction ('up' | 'down' | 'left' | 'right'): Sets movement direction. Default: 'up'. Typewriter mode ignores this value.
rtl ('auto' | boolean): Detects RTL context automatically or forces RTL behavior on or off. Default: 'auto'.
pauseOnFocus (boolean): Pauses playback while the ticker region has focus. Default: true.
pauseOnHover (boolean): Pauses playback while the pointer is over the ticker. Default: true.
controls (object): Defines prev, next, and toggle control elements. Default: { prev: '', next: '', toggle: '' }.

Set autoplay: 0 when each vertical, horizontal, or typewriter action should start immediately after the previous action completes.

new AcmeTicker(document.querySelector('.rapid-feed'), {
  type: 'vertical',
  autoplay: 0,
  speed: 450
});

API Methods

// Resume a paused ticker.
ticker.play();
// Pause at the current item, text position, or marquee position.
ticker.pause();
// Switch between playing and paused states.
ticker.toggle();
// Move to the next item.
// Marquee mode does not implement manual item navigation.
ticker.next();
// Move to the previous item.
// Marquee mode does not implement manual item navigation.
ticker.prev();
// Apply new options and reinitialize the ticker.
ticker.update({
  type: 'typewriter',
  speed: 45,
  autoplay: 2500
});
// Remove ticker behavior and clear plugin-owned DOM changes.
ticker.destroy();

Public Properties And Defaults

Each instance exposes four public properties:

element: The original ticker <ul>.
wrap: The generated .acmeticker-wrap container.
options: The resolved configuration object.
paused: Current playback state.

The browser build also exposes the default configuration through:

console.log(AcmeTicker.DEFAULTS);

Module projects can import the exported defaults:

import { AcmeTicker, DEFAULTS } from 'acmeticker';

Events

document.addEventListener('acmeTickerToggle', function (event) {
  const { ticker, paused } = event.detail;
  console.log(ticker, paused);
});
document.addEventListener('acmeTickerCycle', function (event) {
  const { ticker, count } = event.detail;
  console.log(ticker, count);
});

Styling And Customization

AcmeTicker applies the positioning and movement required by its animation engines through inline styles. No core library stylesheet is required.

Define the ticker frame and theme in your own CSS:

.ticker-window {
  height: 44px;
  overflow: hidden;
  background: #16181d;
}
.release-feed {
  margin: 0;
  padding: 0 16px;
  list-style: none;
}
.release-feed li {
  line-height: 44px;
}
.release-feed,
.release-feed a {
  color: #fff;
}
.ticker-controls button {
  padding: 6px 10px;
  cursor: pointer;
}