Simple Marquee Like Content Scrolling In Vanilla JavaScript

Category: Animation , Javascript | March 19, 2021
Views Total:719 views
Official Page:Go to website
Last Update:March 19, 2021


Simple Marquee Like Content Scrolling In Vanilla JavaScript


The Vanilla JavaScript version of the jQuery Marquee Plugin.

This is a vanilla JavaScript-powered marquee replacement that applies a smooth, configurable, horizontal/vertical scrolling animation to any content.

Great for showcasing products, breaking news, featured posts in a rolling manner.

How to use it:

1. Install and import the Vanilla Marquee component.

$ npm i vanilla-marquee
import maqruee from 'vanilla-marquee'
// Browser
<script type="module">
  import marquee from './dist/vanilla-marquee.min.js';

2. Create a new instance of the Vanilla Marquee and determine the selector of the container.

<h2 id="demo">
  Content Here
const myScroller = new marquee(document.getElementById("demo"), {
      // options here

3. Set the direction of the marquee animation: ‘left’ (default), ‘right’, ‘up’, or ‘down’.

const myScroller = new marquee(document.getElementById("demo"), {
      direction: 'right'

4. Customize the marquee animation with the following options.

const myScroller = new marquee(document.getElementById("demo"), {

      // CSS easing
      css3easing: 'linear',

      // time to wait before starting the animation
      delayBeforeStart: 1000,

      // dulicate the content to create a continuous flow
      duplicated: false,

      // duration of animation
      duration: 5000,

      // space between tickers
      gap: 20,

      // pause on hover
      pauseOnHover: false,

      // re-calculate on window resize
      recalcResize: false,

      // animation speed
      speed: 0,

      // if is visibile from thestart
      startVisible: false,


5. API methods.

// pause

// resume

// toggle between pause and resume

// destroy the instance

You Might Be Interested In:

Leave a Reply