High Performance Marquee Text For Vue.js

Makes use of CSS GPU animation to create a traditional ‘Marquee’ effect for text.

How to use it:

1. Import and register the component.

import Vue from 'vue'
import MarqueeText from 'vue-marquee-text-component'
Vue.component('marquee-text', MarqueeText);
// or
import MarqueeText from 'vue-marquee-text-component'
export default {
  name: 'myApp',
  components: {
    MarqueeText
  }
}

2. Add your text to the <marquee-text> component.

<marquee-text>
  Your Text Here
</marquee-text>

3. Available component props.

duration: {
  type: Number,
  default: 15
},
repeat: {
  type: Number,
  default: 2,
  validator(val) {
    return val > 0
  }
},
paused: {
  type: Boolean,
  default: false
},
reverse: {
  type: Boolean,
  default: false
}

Preview:

Changelog:

v2.0.1 (09/29/2021)

• Vue3 Support

v1.0.2 (10/01/2020)

• Listening to Events
• Add property reverse and set animation-direction to reverse
• Property repeat set min to 1

Download Details:

Author: EvodiaAut

Live Demo: https://evodiaaut.github.io/vue-marquee-text-component/

Download Link: https://github.com/EvodiaAut/vue-marquee-text-component/archive/master.zip

Official Website: https://github.com/EvodiaAut/vue-marquee-text-component

Install & Download:

# Yarn
$ yarn add vue-marquee-text-component

# NPM
$ npm install vue-marquee-text-component --save