High Performance Marquee Text For Vue.js

Install & Download:

# Yarn
$ yarn add vue-marquee-text-component
# NPM
$ npm install vue-marquee-text-component --save

Description:

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
}