A Simple Smooth Horizontal Scroller Component for Vue

vue3-marquee is a simple rectangular component with zero dependencies for Vue 3. This component was originally developed for internal use but I thought this could be useful for someone else as well. This component is built according to the React marquee component I found called React Fast Marquee.

To keep animations running smoothly, copies of content can be created for smooth transitions with no sudden dissonance or blank spaces between content.

smooth marquee jquery, html5 marquee smooth scrolling, smooth scrollbar horizontal, vue smooth scroll, vue on scroll down, vuescroll, marquee slider

How to make use of it:

Install and download:

# Yarn
$ yarn add vue3-marquee

# NPM
$ npm i vue3-marquee

1. Install and import the vue-marquee component.

// globally
import { createApp } from "vue";
import Vue3Marquee from "vue3-marquee";
createApp(App).use(Vue3Marquee).mount("#app");

// locally
import Vue3Marquee from "vue3-marquee";
export default {
  components: {
    Vue3Marquee,
  },
};

2. Add content to the scroller.

<vue3-marquee>
  ... Any Content Here ...
</vue3-marquee>

3. Component props available.

direction: {
  type: String,
  required: false,
  default: "left",
  validator(value) {
    return ["left", "right"].includes(value);
  },
},
duration: {
  type: Number,
  required: false,
  default: 20,
},
delay: {
  type: Number,
  required: false,
  default: 0,
},
loop: {
  type: Number,
  required: false,
  default: 0,
},
clone: {
  type: Boolean,
  required: false,
  default: false,
},
gradient: {
  type: Boolean,
  required: false,
  default: false,
},
gradientColor: {
  type: Array,
  required: false,
  default: [255, 255, 255],
  validator: (value) => {
    if (value.length != 3) {
      return false;
    }
    if (typeof value[0] !== "number" || value[0] < 0 || value[0] > 255) {
      return false;
    }
    if (typeof value[1] !== "number" || value[1] < 0 || value[1] > 255) {
      return false;
    }
    if (typeof value[2] !== "number" || value[2] < 0 || value[2] > 255) {
      return false;
    }
    return true;
  },
},
gradientWidth: {
  type: [String, Number],
  required: false,
  default: 200,
},
pauseOnHover: {
  type: Boolean,
  required: false,
  default: false,
},
pauseOnClick: {
  type: Boolean,
  required: false,
  default: false,
},
options: {
  type: Object,
  required: false,
  default: {},
},

Smooth Horizontal Scroller Component For Vue, vue3 marquee Plugin/Github, js marquee wrapper