vue3-marquee

A simple marquee component with ZERO dependencies for Vue 3. This component was originally developed for internal use but I figured this could be useful to someone else as well. This component is modeled after a React marquee component I found called React Fast Marquee. To keep a smooth animation running, clones of the content can be created for seamless transitions with no flickering or empty spaces in between content.

Demos

View the live demos here: https://vue3-marquee.vercel.app/examples

Upgrade to v4.x

If you are using version 3.x of vue3-marquee you should upgrade to version 4.x. You can do this by running the Installation and Usage command below. This add better support for Typescript. There is also a change with the dist/style.css import (it’s been removed) so take a look at the new documentation for instructions on how to migrate to this package.

Installation and Usage

Vue 3

If you are using npm:

npm install vue3-marquee@latest --save

If you are using yarn:

yarn add vue3-marquee@latest

• Register the component in your Vue 3 application.

The most common use case is to register the component globally.

// main.js
import { createApp } from 'vue'
import Vue3Marquee from 'vue3-marquee'

createApp(App).use(Vue3Marquee).mount('#app')

If you need to use a custom component name, you can pass it as an option to the plugin:

app.use(Vue3Marquee, { name: 'MarqueeAnimation' }) // use in template <MarqueeAnimation />

• name string (default: ‘Vue3Marquee’) - set custom component name

Alternatively you can also import the component locally.

import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}

You can then use the component in your template

<template>
  <Vue3Marquee>
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
    <img height="200" width="300" src="...img" />
  </Vue3Marquee>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'

export default {
  components: {
    Vue3Marquee,
  },
}
</script>

Nuxt 3

If you are using npm:

npm install vue3-marquee@latest --save

If you are using yarn:

yarn add vue3-marquee@latest

• Create a folder called plugins at the root of your project.
• Create a file named Vue3Marquee.client.ts inside the plugins directory.
• Add the following code to the Vue3Marquee.client.ts file.

import Vue3Marquee from 'vue3-marquee'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Marquee, { name: 'Vue3Marquee' })
})

This should register as a global component that you can call anywhere in your app under the <Vue3Marquee> tag.

Props and options

More detailed explanations are provided in the documentation.

Prop	Type	Default Value	Description
direction	String of either ‘normal’ or ‘reverse’	“normal”	The direction for the content to move in
duration	Number	20	The time taken for the marquee content to move the width of the container (in seconds)
delay	Number	0	A delay before the animation starts (in seconds)
loop	Number	0	The number of instances that the marquee animation should run (0 is infinite)
gradient	Boolean	false	Whether to show a gradient overlay
gradientColor	Array of 3 RGB values	[255, 255, 255]	The RGB colors for the color of the gradient
gradientLength	String	200px	Length of portion of the container edges that should be taken by the gradient overlay
pause	Boolean	false	A reactive prop to pause the marquee
pauseOnHover	Boolean	false	Whether to pause the marquee on hover
pauseOnClick	Boolean	false	Whether to pause the marquee when you hold the right click button
clone	Boolean	false	Whether to clone the content if you want no empty spaces in the animation
vertical	Boolean	false	Whether to make the marquee vertical
animateOnOverflowOnly	Boolean	false	Whether to animate the marquee if the content overflows the container

Events

A few events are emitted from the component. Look at the Demos for examples.

• onComplete
  • If your marquee has a finite amount of loops you can use this event to know when the animation has completed.
• onLoopComplete
  • You can use this event to know when your marquee has completed a loop.
• onPause
  • This event is emitted if you have either pauseOnHover or pauseOnClick enabled. It will notify if the animation pauses.
• onResume
  • This event is emitted if you have either pauseOnHover or pauseOnClick enabled. It will notify if the animation resumes.
• onOverflowDetected
  • This event is emitted if you have animateOnOverflowOnly enabled. It will notify if the content overflows the container.
• onOverflowCleared
  • This event is emitted if you have animateOnOverflowOnly enabled. It will notify if the content no longer overflows the container. (useful if you need to add a class to the container when the content overflows)

Credits

• @krishnaguragain - PR #217 - Add the pause prop
• @adampanger - PR #345 - Fix for animateOnOverflowOnly emit events