Skip to content


The marquee component allows to create an animated text copying the old marquee element with modern support.

@import 'compotes/css/marquee';
import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee')

The structure consists to a list of element. All animation are CSS based.


<div class="c-marquee">
  <ul class="c-marquee-container">
    <li>This is the default marquee</li>
    <li>Marquee or marquii</li>

You are not limited to text. You can also add any kind of valid HTML like image.


  • Make the marquee tabbable and stop it if it is in focus via the keyboard
  • If the user has configure prefers-reduced-motion on his browser, the marquee animation will not be played.
  • If you are using the fill option, all cloned element will be set to aria-hidden to hide the non necessary content to the screen reader and not be tabbable thank to a tabindex="-1".
  • If an element is focus with the keyboard, the marquee animation will be stop.


You can change some options from the component.

import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee', {
  init: true, 
  initEvents: true,
  fill: false,
  direction: 'right',
  behavior: 'scroll',
  duration: 1,
  mutationObserver: true
  • init (boolean): Init the component on creation
  • initEvents (boolean): Init events on the component
  • fill (boolean): Fill the marquee to make a loop
  • direction ('left' | 'right' | 'up' | 'down'): Direction of marquee animation
  • behavior ('scroll' | 'alternate'): The behavior the marquee animation
  • duration (number or string): The duration of the marquee animation
  • mutationObserver (boolean): Use MutationObserver to update component on changes


The marquee component provides several methods to init and destroy it. You can also control the marquee animation.

import { Marquee } from 'compotes'

const marquee = new Marquee('.c-marquee', {
  init: false
  • init(): Init the component
  • initEvents(): Init component events
  • destroyEvents(): Destroy the component events
  • destroy(): Destroy the component
  • update(): Update the marquee component
  • play(): Play the marquee component
  • pause(): Pause the marquee component


You can access data from the component like this:

import { Marquee } from 'compotes'

const marquee = new Marquee('#my-marquee')
  • options (options object): Get options used to init the component
  • isPaused (boolean): If the marquee is paused or not


You can listen to emitted events directly on the marquee element like this:

marqueeEl.addEventListener('c.marquee.init', (e) => { 
  console.log(e.detail)// marquee object
  • c.marquee.init: On component init
  • On component marquee play
  • c.marquee.pause: On component marquee pause
  • c.marquee.loop: On component marquee loop
  • c.marquee.destroy: On component destroy

Released under the MIT License.