Ticker

The ticker plugin initializes a seamless, infinite scrolling animation (marquee) using the GSAP library based on the data-ticker attribute. It automatically calculates and clones the necessary items to ensure continuous movement across the screen.

In development, it is implemented in assets/js/modules/ticker.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, you must follow this nested structure:

Add data-ticker on a parent wrapper element.
Inside the parent wrapper, add an element with the data-ticker-items-wrap attribute. This wrapper determines the gap between the cloned sets.
Inside the items wrap, add a container with the data-ticker-items attribute.
Inside the items container, add one or more child elements with the data-ticker-item attribute.

Notes:

The plugin automatically clones the data-ticker-items container enough times to fill the screen and animate seamlessly.
It recalculates and adds more clones if the window is resized to a larger width.
The gap between repeating sets is calculated based on the column-gap CSS property applied to the data-ticker-items-wrap element.

Customizing animation duration

By default, the ticker animation takes 30 seconds to complete one full cycle of the content width. You can override this globally for the ticker instance by adding the optional data-ticker-duration attribute to the parent wrapper.

Attribute	Default	Description
`data-ticker-duration`	`30`	The duration (in seconds) for the ticker to scroll one complete set of items.

Markup Example

Below is an example markup of the plugin. Key details are included in the HTML comments:


<!-- Start: data-ticker on parent wrapper -->
<!-- Optional: use data-ticker-duration to customize the speed (default is 30) -->
<div data-ticker data-ticker-duration="45">
  <!-- Start: data-ticker-items-wrap -->
  <div data-ticker-items-wrap class="flex gap-4">
    <!-- Start: data-ticker-items -->
    <div data-ticker-items class="flex gap-4">
      
      <!-- Start: data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Innovation</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: data-ticker-item -->
 
      <!-- Start: Another data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Integrity</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: Another data-ticker-item -->
 
      <!-- Start: Another data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Simplicity</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: Another data-ticker-item -->
 
      <!-- Start: Another data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Collaboration</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: Another data-ticker-item -->
 
      <!-- Start: Another data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Impact</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: Another data-ticker-item -->
 
      <!-- Start: Another data-ticker-item -->
      <div data-ticker-item class="inline-flex items-center gap-4">
        <span class="text-xs font-medium tracking-widest text-muted-foreground uppercase">Resilience</span>
        <span class="h-1 w-1 shrink-0 rounded-full bg-muted-foreground"></span>
      </div>
      <!-- End: Another data-ticker-item -->
 
    </div>
    <!-- End: data-ticker-items -->
  </div>
  <!-- End: data-ticker-items-wrap -->
</div>
<!-- End: data-ticker on parent wrapper -->

Demo Example

View the complete code sample on this page.

About