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

`gradientLength` Updated

This option was previously called gradientWidth and has been renamed to gradientLength to better reflect its purpose with both horizontal and vertical marquee animations.

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

gradientLength demo

`pause` new

A reactive prop to pause the marquee animation.

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

`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

`vertical` New

A prop to allow the marquee to scroll vertically.

You need to have a parent container with an explicit height for this to work properly! View the examples for more info.

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

vertical demo

`clone`

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

`gradientWidth` Deprecated

This prop is deprecated and will be removed in the next major release. Use gradientLength instead.