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.

TypeDefault valueRequiredAccepted values
Stringnormalnonormal or reverse

duration

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

TypeDefault valueRequiredAccepted values
Number20noNumber > 0

delay

A delay before the animation starts (in seconds).

TypeDefault valueRequiredAccepted values
Number0noNumber >= 0

loop

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

TypeDefault valueRequiredAccepted values
Number0noNumber >= 0

gradient

Whether to show a gradient overlay.

TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

gradient demo

gradientColor

The RGB colors for the color of the gradient.

TypeDefault valueRequiredAccepted 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.

TypeDefault valueRequiredAccepted values
String200pxnoAny valid css unit

gradientLength demo

pause

A reactive prop to pause the marquee animation.

TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

pauseOnHover

Whether to pause the marquee on hover

TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

pauseOnHover demo

pauseOnClick

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

TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

pauseOnClick demo

vertical

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.
TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

vertical demo

animateOnOverflowOnly New

A prop that allows the marquee to animate only when the content overflows its container.

This prop does not work with vertical marquee animations. Since a fixed height parent container is required for vertical animations, this feature is not supported.
The animation snaps back to the start when the content overflow is resolved. You can use the justify-content css property to control the alignment of the content in this instance. View the link to the demo below for more info.
TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

animateOnOverflowOnly demo

clone

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

TypeDefault valueRequiredAccepted values
Booleanfalsenotrue or false

clone demo

gradientWidth Deprecated

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

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

TypeDefault valueRequiredAccepted values
String200pxnoAny valid css unit