Tickers

Create infinitely scrolling content streams without gaps or jumps. Control direction, speed, pause behavior, and orientation — all using HTML attributes.

# Getting started

Create an infinite scrolling ticker using the data-mf-ticker attribute. Any direct child inside the container becomes part of the scrolling stream.

No initialization required. No configuration required. No JavaScript required.

Demo

MotionFlowScroll AnimationsParallaxCounters

<div data-mf-ticker>
   <span>MotionFlow</span>
   <span>Scroll Animations</span>
   <span>Parallax</span>
   <span>Counters</span>
 </div>

MotionFlow automatically detects this attribute and creates a seamless, continuous ticker loop without gaps or jumps.

# Ticker attributes

MotionFlow tickers are attribute-first. All scrolling behavior can be controlled directly from HTML using data-mf-ticker-* attributes.

Demo

MotionFlowScroll AnimationsParallaxCounters

<div 
 data-mf-ticker
 data-mf-ticker-speed="80"
 data-mf-ticker-direction="left"
 data-mf-ticker-pause-on-hover="true"
 data-mf-ticker-pause-on-visibility="true"
  >
   <span>MotionFlow</span>
   <span>Scroll Animations</span>
   <span>Parallax</span>
   <span>Counters</span>
 </div>

You don’t need to add every attribute. MotionFlow has default values for all attributes. Default values are listed in the table below. Add an attribute only when you want to override the default.

Attribute	Default	Description
`data-mf-ticker`	—	Enables infinite scrolling ticker behavior
`data-mf-ticker-speed`	`80`	Controls the ticker scroll speed (pixels per second)
`data-mf-ticker-direction`	`left`	Sets the scroll direction (left, right, up, down)
`data-mf-ticker-pause-on-hover`	`false`	Pauses the ticker when hovered (hover-capable devices only)
`data-mf-ticker-pause-on-visibility`	`true`	Pauses the ticker when the browser tab is not visible

# Speed

Control how fast the ticker moves using the data-mf-ticker-speed attribute. The value represents pixels per second.

Higher values create faster movement, while lower values result in slower, more subtle motion.

Demo

Speed: 40px/sec

Slow tickerSmooth motion

Speed: 140px/sec

Fast tickerHigh energy

<div data-mf-ticker data-mf-ticker-speed="40">
  <span>Slow ticker</span>
  <span>Smooth motion</span>
</div>

<div data-mf-ticker data-mf-ticker-speed="140">
  <span>Fast ticker</span>
  <span>High energy</span>
</div>

Speed is frame-rate independent and uses requestAnimationFrame internally to ensure smooth motion across all devices.

Attribute	Default	Description
`data-mf-ticker-speed`	80	Controls ticker movement speed in pixels per second

# Direction

Control the scrolling direction of a ticker using the data-mf-ticker-direction attribute.

MotionFlow supports both horizontal and vertical directions.

Demo

Direction: left

Scroll leftHorizontal

Direction: right

Scroll rightHorizontal

Direction: up

Scroll upVertical

Direction: down

Scroll downVertical

<div data-mf-ticker data-mf-ticker-direction="left">
  <span>Left</span>
</div>

<div data-mf-ticker data-mf-ticker-direction="right">
  <span>Right</span>
</div>

<div data-mf-ticker data-mf-ticker-direction="up">
  <span>Up</span>
</div>

<div data-mf-ticker data-mf-ticker-direction="down">
  <span>Down</span>
</div>

Vertical tickers automatically switch to a column layout and loop seamlessly in both directions.

Value	Usage	Description
left	`data-mf-ticker-direction="left"`	Scrolls content from right to left
right	`data-mf-ticker-direction="right"`	Scrolls content from left to right
up	`data-mf-ticker-direction="up"`	Scrolls content upward in a vertical loop
down	`data-mf-ticker-direction="down"`	Scrolls content downward in a vertical loop

# Pause on hover

Pause a ticker automatically when the user hovers over it using data-mf-ticker-pause-on-hover.

This interaction is enabled only on devices that support hover (desktop and laptop). Touch devices continue scrolling normally.

Demo

Hover over the ticker to pause

Hover meMotionFlowPauses on hover

<div
  data-mf-ticker
  data-mf-ticker-pause-on-hover="true"
>
  <span>Hover me</span>
  <span>MotionFlow</span>
  <span>Pauses on hover</span>
</div>

Pause-on-hover is useful for tickers containing links, buttons, or readable text, allowing users to interact without distraction.

Value	Usage	Description
true	`data-mf-ticker-pause-on-hover="true"`	Pauses the ticker while the cursor is hovering over it
false	`data-mf-ticker-pause-on-hover="false"`	Disables hover-based pausing

# Pause on visibility change

By default, tickers automatically pause when the browser tab becomes hidden and resume when it becomes visible again.

This helps prevent timing jumps, desynchronization, and unnecessary CPU usage when the page is not active.

Option	Default	Description
`pauseOnVisibilityChange`	`true`	Pauses the ticker when the browser tab is hidden and resumes it when visible again

Disabling this option prevents MotionFlow from manually pausing the ticker. Browsers may still throttle or pause animations in background tabs.

# Image Ticker

Use image tickers to create eye-catching logo strips, portfolios, or galleries. MotionFlow keeps them smooth and performant, with optional pause-on-hover for better usability and interaction.

Demo

Hover over the ticker to pause

<div data-mf-ticker data-mf-ticker-speed="100" data-mf-ticker-pause-on-hover="true">
  <span><img src="ticker-img1.jpg" alt="Demo image"/></span>
  <span><img src="ticker-img2.jpg" alt="Demo image"/></span>
  <span><img src="ticker-img3.jpg" alt="Demo image"/></span>
  <span><img src="ticker-img4.jpg" alt="Demo image"/></span>
  <span><img src="ticker-img5.jpg" alt="Demo image"/></span>
  <span><img src="ticker-img6.jpg" alt="Demo image"/></span>
</div>

Image source: Pexels.com

# Controls

In addition to HTML attributes, MotionFlow lets you control tickers using JavaScript. You can play, pause, or toggle tickers globally, by ID, or by class selector.

Method	Description
`play()`	Starts ticker animation
`pause()`	Pauses ticker animation
`toggle()`	Toggles play / pause state

## Global control

Global control lets you play, pause, or toggle all tickers on the page at once.

When you call a ticker method without passing any selector, MotionFlow automatically applies the action to every initialized ticker instance. This is useful when you want a single control to manage all tickers together.

Demo

Controls all tickers on the page

MotionFlowScroll AnimationsParallaxCounters

<button onclick="MotionFlow.ticker.play()">Play All</button>
<button onclick="MotionFlow.ticker.pause()">Pause All</button>
<button onclick="MotionFlow.ticker.toggle()">Toggle All</button>

<div data-mf-ticker>...</div>
<div data-mf-ticker>...</div>
<div data-mf-ticker>...</div>

## ID-based control

ID-based control allows you to target and control a single specific ticker using its unique ID.

By passing an ID selector to the control method, MotionFlow applies the action only to the matching ticker, leaving all other tickers unaffected. This is ideal for hero sections or featured tickers that require independent control.

Demo

Control a specific ticker using an ID selector

Ticker with IDTicker with IDTicker with ID

<button onclick="MotionFlow.ticker.play('#myTicker')">Play</button>
<button onclick="MotionFlow.ticker.pause('#myTicker')">Pause</button>
<button onclick="MotionFlow.ticker.toggle('#myTicker')">Toggle</button>

<div data-mf-ticker id="myTicker">...</div>

## Class-based control

Class-based control lets you control multiple tickers together by assigning them a shared class name.

When a class selector is passed, MotionFlow targets all ticker elements that match the class, applying the action to each of them. This approach is perfect for grouped tickers that should behave in sync.

Demo

Control multiple tickers using a shared class

AppleGoogleMicrosoft

AmazonNetflixTesla

<button onclick="MotionFlow.ticker.play('.myTicker')">Play</button>
<button onclick="MotionFlow.ticker.pause('.myTicker')">Pause</button>
<button onclick="MotionFlow.ticker.toggle('.myTicker')">Toggle</button>

<div data-mf-ticker class="myTicker">...</div>
<div data-mf-ticker class="myTicker">...</div>

# Ticker lifecycle

Tickers initialize automatically on page load. When a ticker is hidden, shown later, destroyed, or its content changes dynamically, manual lifecycle control may be required.

Method	Method call	Description
init	`MotionFlow.ticker.init();`	Initializes or re-initializes tickers using the last configuration
refresh	`MotionFlow.ticker.refresh();`	Rebuilds tickers and retries initialization for newly visible or updated ticker elements
destroy	`MotionFlow.ticker.destroy();`	Stops and removes all ticker instances

## Example usage

When a ticker becomes visible after being hidden, or when its layout changes dynamically, refresh the ticker engine to ensure it initializes correctly.

// Call this after ticker elements become visible
function onLayoutChange() {
  MotionFlow.ticker.refresh();
}

# Global configuration (optional)

MotionFlow tickers work without any JavaScript configuration. By default, all behavior is controlled using HTML attributes.

Global configuration is only needed if you want to define shared defaults across multiple tickers.

Individual tickers can still override these values using data-mf-ticker-* attributes.

MotionFlow.init({
  /* --------------------------------
     Tickers - Used for continuous scrolling text or images 
  ----------------------------------- */
  ticker: {
    speed: 80,                     // Default: 80    | Scroll speed in pixels per second
    direction: "left",             // Default: left  | left | right | up | down
    pauseOnHover: false,           // Default: false | Pause ticker on hover (hover-capable devices only)
    pauseOnVisibilityChange: true  // Default: true  | Pause ticker when browser tab is not visible
  }
});

If you don’t call MotionFlow.init(), MotionFlow automatically uses built-in ticker defaults.