Simple Marquee Like Content Scrolling In Vanilla JavaScript

Category: Animation , Javascript | June 7, 2022
Views Total:1,292 views
Official Page:Go to website
Last Update:June 7, 2022


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


v1.1.2 (06/07/2022)

  • Bugfix

You Might Be Interested In:

Leave a Reply