Javascript Dynamic Marquee Effect Component Library for Vue

Dynamic Select is a Vue.js component to implement a configurable dynamic marquee effect on your application.

marquee effect in jquery, dynamic marquee in html, continuous marquee jquery with demo, vue npm dynamic marquee, javascript marquee library, javascript marquee scroll vertical

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-dynamic-marquee

$ npm i vue-dynamic-marquee

1. Import the dynamic selection component.

import DynamicMarquee from ‘vue-dynamic-marquee’;

2. Register the component.

Vue.component(‘dynamic-marquee’, DynamicMarquee);

3. Add a <dynamic-marquee> component to the template.

  Any Marquee Content Here

4. Component props available.

speed: {
  type: Object,
  default() {
    return {
      type: 'pps',
      number: 100,
  validator(val) {
    return (
      val.type &&
      ['pps', 'duration'].includes(val.type) &&
      val.number &&
repeat: {
  type: Boolean,
  default: true,
repeatMargin: {
  type: Number,
  default: 10,
hoverPause: {
  type: Boolean,
  default: true,
pause: {
  type: Boolean,
  default: false,
direction: {
  type: String,
  default: 'column',
  validator(val) {
    return ['column', 'row'].includes(val);
reverse: {
  type: Boolean,
  default: false,


direction‘row’|’column’‘column’animation direction
reversebooleanfalseBy default the slot will translate according to document flow – top to bottom for {direction: ‘column’} and and for {direction: ‘row’} in accordance to ltr-rtl direction style of the wrapper. This behaviour can be reversed with this prop.
repeatbooleantrueIf true the slot will repeat itself so as not to leave whitespace as the slot is finishing to translate out of the wrapper. The component will compute the number of times to repeat the slot in accordance with the repeatMargin prop.
repeatMarginnumber10Pixels between repeated slots.
speed{type: ‘pps’|’duration’,
number: number}
{type: ‘pps’,
number: 100}
There are two ways to define the translation speed. When choosing ‘pps’, ‘number’ is number of pixels per second. When choosing ‘duration’, ‘number’ is the number of milliseconds in which the slot will translate from the begining to the end of the wrapper element.
hoverPausebooleantrueShould animation pause upon hovering over wrapper element.
pausebooleanfalseUse to programmaticlly pause animation.

Vue Dynamic Marquee Effect Plugin/Github, marquee animation js

See Demo And Download

Official Website(YishaiBerg): Click Here

This superior jQuery/javascript plugin is developed by YishaiBerg. For extra Advanced Usages, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *