Everything a news ticker needs
Built from the ground up for publishers and modern applications — lightweight, accessible, and effortlessly customized.
Zero dependencies
Vanilla JavaScript only. No jQuery, no runtime bloat — clean, modern, and tree-shakeable.
Four engines
Vertical, horizontal, continuous marquee and typewriter modes, switchable dynamically with update().
Full RTL support
Automatic direction detection and motion mirroring on Arabic and Hebrew layouts without manual config.
TypeScript types
Complete type definitions shipped with the package. Fully compatible with NodeNext and bundler resolution.
Accessible by default
Pauses on hover and focus, respects prefers-reduced-motion, and manages aria-live regions cleanly.
RAF animations
Silky 60fps transitions driven by requestAnimationFrame. autoplay: 0 loops continuously.
Events & controls
Native acmeTickerCycle and acmeTickerToggle custom events. Flexible selector/element binding.
Universal builds
Shipped in ESM, CommonJS and global UMD formats. Works with Vite, Next.js, Webpack, or simple script tags.
Four engines, one line of HTML
Experience all four ticker modes running live with real controls and transition easing.
- Global markets rally as inflation cools faster than expected
- City launches electric bus fleet with free rides for the first month
- Scientists reveal a new coral reef restoration technique
- Season finale heads to extra time with the title still undecided
- Home prices steady as mortgage rates ease for the third straight month
- Global markets rally as inflation cools faster than expected
- City launches electric bus fleet with free rides for the first month
- Scientists reveal a new coral reef restoration technique
- Season finale heads to extra time with the title still undecided
- Airline adds direct summer flights between the two coastal cities
All four engines running the published dist/acmeticker.min.js production bundle.
Arabic and Hebrew, out of the box
Point AcmeTicker at a dir="rtl" container and motion, rest positions, and controls mirror automatically.
Logical directions, zero configuration
- Automatic detection from
dir="rtl",dir="auto"or CSSdirection. - Logical
left/rightmapping follows bidirectional reading flow. - Override anytime with
rtl: falseto enforce physical motion. - Vertical and typewriter engines remain direction-neutral.
<html lang="ar" dir="rtl">
<ul class="my-news-ticker">...</ul>
</html>
new AcmeTicker('.my-news-ticker', {
type: 'horizontal'
});- الأسواق العالمية تسجل مكاسب ملحوظة مع تراجع معدلات التضخم
- المدينة تطلق أسطول الحافلات الكهربائية مع رحلات مجانية للشهر الأول
- علماء يبتكرون تقنية جديدة لاستعادة وحماية الشعب المرجانية
- المباراة النهائية تمتد إلى الأشواط الإضافية وسط منافسة محتدمة
- استقرار أسعار العقارات مع انخفاض الفائدة للشهر الثالث على التوالي
v1 vs v2 Architecture
The v2 rewrite preserves familiar v1 APIs while eliminating legacy dependencies and modernizing performance.
| Capability | v1 (jQuery Plugin) | v2 (Modern Vanilla) |
|---|---|---|
| Runtime Dependencies | jQuery required | ✓ Zero dependencies |
| Animation Engine | jQuery animate() | ✓ 60fps RAF + v1 easing |
| TypeScript Support | None | ✓ Full type declarations |
| RTL Support | Not supported | ✓ Built-in logical RTL |
| Continuous Loop (autoplay: 0) | Corrupted loop | ✓ Seamless continuous flow |
| Distribution Bundles | Single script only | ✓ ESM + CJS + Global UMD |
| Controls Target Binding | jQuery objects only | ✓ Selectors, Elements, NodeLists |
| Event Dispatching | Positional callbacks | ✓ Standard event.detail |
Up and running in minutes
Choose your preferred integration style: npm package, plain script tag, or modern framework.
npm install acmeticker
<script src="https://cdn.jsdelivr.net/npm/acmeticker@2.0.0/dist/acmeticker.min.js"></script>
<script>
new AcmeTicker('.my-news-ticker', {
type: 'horizontal',
direction: 'right'
});
</script>
import { AcmeTicker } from 'acmeticker';
const ticker = new AcmeTicker(document.querySelector('ul.ticker'), {
type: 'vertical',
direction: 'up',
speed: 600,
autoplay: 4000,
pauseOnHover: true,
controls: {
prev: '.at-ticker-prev',
next: '.at-ticker-next',
toggle: '.at-ticker-pause'
}
});
import { useEffect, useRef } from 'react';
import { AcmeTicker } from 'acmeticker';
function NewsTicker({ items }) {
const listRef = useRef(null);
useEffect(() => {
const ticker = new AcmeTicker(listRef.current, {
type: 'marquee'
});
return () => ticker.destroy();
}, []);
return (
<ul ref={listRef}>
{items.map(item => <li key={item}>{item}</li>)}
</ul>
);
}
Explore standalone examples
Production-ready demo pages showcasing every engine and configuration setup.
Options and Methods API
A compact, intuitive API surface designed for maximum control with zero configuration overhead.
| Option | Default | Description |
|---|---|---|
type | 'horizontal' | vertical, horizontal, marquee or typewriter |
autoplay | 2000 | Pause between transitions (0 = continuous loop) |
speed | 50 | Transition duration, char delay or marquee px/ms |
direction | 'up' | up / down / left / right — logical under RTL |
rtl | 'auto' | auto-detect, or force true / false |
pauseOnFocus | true | Pause while the ticker region is focused |
pauseOnHover | true | Pause while the pointer is over the ticker |
controls | {} | prev / next / toggle — selectors, elements or NodeLists |
play() resume
pause() freeze
toggle() flip
next() / prev() navigate
update() re-configure
destroy() teardown