Go to homepage

Projects /


News-like Horizontal Scrolling List

View Demo

How to

The Ticker component is used to create a list of horizontally scrolling items.

By default, the list translates from right to left. To reverse the direction of the animation, add the .ticker--reverse class to the .ticker element.

If you want to pause the animation on hover, add a data-ticker-pause-hover="on" attribute to the .js-ticker element:

<div class="ticker js-ticker" data-ticker-pause-hover="on">
  <!-- ... -->

Horizontal Gap #

To control the horizontal gap among the list items, use the --ticker-gap-x custom property:

<div class="ticker js-ticker" style="--ticker-gap-x: var(--space-md);">
  <!-- ... -->

Pause Button #

The Ticker comes with the option of adding a pause/play button. Make sure to add, to the control button, an aria-controls attribute equal to the id of the ticker element:

<button class="js-ticker-control js-tab-focus" aria-controls="ticker" aria-label="pause animation" aria-pressed="false">Toggle Ticker</button>

<div class="ticker js-ticker" id="ticker">
  <ul class="ticker__list">
    <!-- list items here -->

Image Width #

If you're using the plugin to animated a list of images, make sure to add the .ticker__img class to each image element, and set the --ticker-img-width custom property to control the width of the images (see --v3 demo).

If you're using inline SVG images, make sure to set the inline width on the SVG element. Optionally, you can control the color of the SVG elements by using the fill and color utility classes (see --v2 demo).


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.