Props

All the possible props for vue3-marquee are listed below.

`direction`

The direction for the content to move in. normal corresponds to elements moving left and reverse corresponds to elements moving right.

Type	Default value	Required	Accepted values
String	`normal`	no	`normal` or `reverse`

`duration`

The time taken for the marquee content to move the width of its own container (in seconds).

Type	Default value	Required	Accepted values
Number	`20`	no	`Number > 0`

`delay`

A delay before the animation starts (in seconds).

Type	Default value	Required	Accepted values
Number	`0`	no	`Number >= 0`

`loop`

The number of times that the marquee animation should run (0 corresponds to infinite).

Type	Default value	Required	Accepted values
Number	`0`	no	`Number >= 0`

`gradient`

Whether to show a gradient overlay.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

gradient demo

`gradientColor`

The RGB colors for the color of the gradient.

Type	Default value	Required	Accepted values
Array of 3 RGB values	`[255, 255, 255]`	no	`[0 <= Number <= 255, 0 <= Number <= 255, 0 <= Number <= 255]`

gradientColor demo

`gradientWidth`

What portion of the container edges should be taken by the gradient overlay.

Type	Default value	Required	Accepted values
String	`200px`	no	Any valid css unit

gradientWidth demo

Any accepted css size unit (eg: 10%, 2em) can be used here. You might need to play around with this unit to get the gradient overlay that you want.

`pauseOnHover`

Whether to pause the marquee on hover

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

pauseOnHover demo

`pauseOnClick`

Whether to pause the marquee when you hold the right click button.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

pauseOnClick demo

`clone`

This option is still in the experimental stage.

Whether to clone the content. If you want no empty spaces in the animation use this option to auto clone fill content.

Type	Default value	Required	Accepted values
Boolean	`false`	no	`true` or `false`

clone demo

Edit this page on GitHub

IntroductionUsage with Nuxt 3

ApiEvents

Vue 3 Marquee